Feature: make the SCSS file importable without an improper path

[tijsmoree]

I want to import the SCSS file into my own SCSS file. This is only possible using the dirty path (including ../node_modules) as @use '../../node_modules/angular-notifier/styles.scss' and not using the short-hand version @use 'angular-notifier/styles', which is the way I can import styling files of other packages.

I believe the problem here is that the styling file is called styles.scss, but there is a folder named styles as well. This dirty import could be circumvented if either of the two would be renamed. I would suggest renaming the styles file to default.scss for example.

This would of course be a breaking change.

[H3AR7B3A7]

@import 'angular-notifier/styles';
or
@import '~angular-notifier/styles';

both work fine for me.

[tijsmoree]

Okay, the weird thing is that @import 'bootstrap/scss/bootstrap'; and @import 'node_modules/bootstrap/scss/bootstrap'; both work fine (the same goes for @ng-select.

For angular-notifier, however, only @import 'node_modules/angular-notifier/styles'; works and @import 'angular-notifier/styles'; does not in my case. It gives a SassError: Can't find stylesheet to import. error. I also tried using the tilde or adding .scss to the end, but that did not make a difference and I found somewhere that the tilde has been deprecated from Angular 13 onward.

Does anyone have an explanation for this difference?

[H3AR7B3A7]

So, you are using angular 14? Is it a newly generated project? Or generated in a previous version of angular and then updated?

[tijsmoree]

My current project was started in an older angular version, but now I tried it with a whole new configuration.

I created a new Angular 14 project using ng new with Angular CLI: 14.1.3 (ng version). Then I added "@ng-bootstrap/ng-bootstrap": "^13.1.0",, "bootstrap": "^5.2.0", and "angular-notifier": "^12.0.0", to the package.json and ran npm i. I changed the styles.scss to:

@import 'bootstrap/scss/bootstrap';
@import 'angular-notifier/styles';

When running ng serve it gives the following error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import 'angular-notifier/styles';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 2:9  root stylesheet

Adding tildes or .scss does not matter.