After upgrading npm package of Angular app, sass-loader does not work anymore

Question

I just upgraded to Angular 13 from Angular 12 and also updated some other NPM packages.
One of them contained scss files that are referenced in my angular.json file. This was never a problem, but after trying to serve my application I get an error message that is hard to understand for me:

./src/styles/ag-grid.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'my-custom-package-layout/src/lib/styles/styles.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\ag-grid.scss 1:9  root stylesheet

./src/styles/products.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/products.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'my-custom-package-layout/src/lib/styles/mixins.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\products.scss 1:9  root stylesheet

./src/styles/ag-grid.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.
  ╷

This is just the first lines of the very long error message that states that 'my-custom-package-layout/src/lib/styles/styles.scss' cant be found in many files.
But if I navigate there with visual studio code I do not get an error and the reference seems fine.

This makes me think that the sass-loader in general does not work anymore. (The first line is very long. Look there - it really looks like this!)
How is sass-loader implemented in Angular? I cant reinstall sass, because its not even referenced in my package.json.
Is it somehow part of the Angular.cli?

What could I try to get a little closer to the solution?

If I run 'npm rebuild node-sass', I just get very quickly the reply:

rebuilt dependencies successfully

No change...

Upswell

Answer 1

I had to put a ~ sign in front the path. That resolved it:

@import '~my-custom-package-layout/src/lib/styles/mixins.scss';

Upswell

Answer 2

It was because of a cached version of node-sass.You can try this.

• Remove the node-sass from global npm-cache(For Windows users %userprofile%\AppData\Roaming\npm-cache).
• Remove node-sass from your project's node_modules dir.
• Do npm install to reinstall node-sass.

Noisemaker

The "%userprofile%\AppData\Roaming\npm-cache" does not hold the node-sass folder in my case. And reinstalling from node_modules did not work unfortunately. :( – Upswell

Answer 3

I've tried to add ~ before the library name, and in the angular.json I tried to add the library to stylePreprocessorOptions.includePaths but it isn't working for me.

I added node_modules before the library name and it solve my problem. @import 'node_modules/@myscope/mylib/src/assets/input.base.scss';

Lambard

Or you can add "stylePreprocessorOptions": { "includePaths": [ "./node_modules" ] } into angular.json – Johannejohannes