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...
I had to put a ~ sign in front the path. That resolved it:
@import '~my-custom-package-layout/src/lib/styles/mixins.scss';