SassError: Can't find stylesheet to import.

Reproduction

I’ve implemented the basic share buttons. Everything is working find except for the styling.

SassError: Can't find stylesheet to import.
  ╷
5 │ @import '~ngx-sharebuttons/themes/circles/circles-dark-theme';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 5:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
3 │ @import '~ngx-sharebuttons/themes/default';

Expected Behavior

Nicely styled buttons.

Actual Behavior

Buttons with no styling applied.

Environment

Angular: 14
ngx-sharebuttons: 11
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows

Issue Analytics

State:
Created a year ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

juanico18commented, Oct 7, 2022

The problem is that in the docs is told that we should import the scss from our styles.scss https://github.com/MurhafSousli/ngx-sharebuttons/wiki/Share-Buttons-Component

But on your stackBitz, what you are doing is adding the reference in the angular.json

I think that this is the real problem. To fix it instead import on styles.scss On the angular.json we should add “styles”: [ “src/styles.scss”, “node_modules/ngx-sharebuttons/themes/modern.scss”, “node_modules/ngx-sharebuttons/themes/material.scss” ]

Just add the theme required by your project

0reactions

MurhafSouslicommented, Dec 24, 2022

@FanniTakax In the new version, the themes directory has changed, see changelog. it should be just @import '~ngx-sharebuttons/themes/circles';

The stackblitz has different environment unlike the one you get with the Angular CLI, in the stackblitz you cannot access node_modules directory from the stylesheet, so we fallback to import it in angular.json, it’s not bad option in the end!

Top Results From Across the Web

Sass "Error: Can't find stylesheet to import." - Stack Overflow

This happened to me because I was running ng build --prod within a folder other than the root project folder, and every other...

Error: Can't find stylesheet to import. · Issue #3269 - GitHub

Sass version is 1.49.9 compiled with dart2js 2.16.1. ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS...

Executing Sass - Can't find stylesheet to import - Syncfusion

Hi :) I'm currently trying to do the following: code.png. So I import the base styles, then I override some scss variables, and...

Laravel NPM run Dev error "Can't find stylesheet to import."

node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. @import "~compass/css3"; I already installed compass and compass-mixins.

Sass Error after upgrading vom v14 to v15 | Infragistics Forums

src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import.