Angular 17 - Can't find stylesheet to import (After Angular Upgrade)

Question

I have found everything related to angular material theming, however, it's not the case.

After Angular 16 upgrade to Angular 17 I cannot import some styles from a specific node_module.

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can't find stylesheet to import.

Everything was working fine before the upgrade

Example import: @import '@package/src/components/specific-component';

If the scss file in node_module that I'm trying to import doesn't have any imports inside of it, everything works without any errors, however, if it has - I get provided error.

specific-component.scss (from node_module) - that would give an error, if I tried importing it in my own scss

@import 'mixins';

.specific-class {
  @include something();
}

specific-component.scss - that works and imports normally as before.

//@import 'mixins';

.specific-class {
  color: white;
}

Anyone encountered something similar and resolved that?

Answer 1

Please try below configuration in your angular.json file (path: projects..architect.build.options.stylePreprocessorOptions)

Configuration:

"stylePreprocessorOptions": { "includePaths": [ "." ] }

Answer 2

Make sure you have added the paths of the scss files you want to use in the stylePreprocessorOptions, includePaths inside angular.json.

"stylePreprocessorOptions": {
   "includePaths": [
     "src/styles",
     "src/assests/styles"
  ]
}

Then try importing them like.

@import 'mixins.scss';

.specific-class {
  @include something();
}