ng test fails because of SassError: Can't find stylesheet to import

Question

I have several .scss files that I import in my components which are contained within modules. When I build my project for dev or for prod everything is fine, but when I run ng test I see a bunch of errors saying something like:

SassError: SassError: Can't find stylesheet to import.

1 │ @import "mixins";

This happens for every imported .scss file in my modules. Shared styles are placed in src/assets/styles directory like this:

-src
  -assets
    -styles
      -_mixins.scss
      -_theme.scss
      ...etc

In my angular.json I have the following properties:

"styles": ["src/styles.scss"],
"stylePreprocessorOptions": {
  "includePaths": ["src/assets/styles"]
},

I've tried referencing all my styles in main style.scss, but to no avail. The main thing that buggers me is that in dev and prod mode everything works fine, it's just the tests that bring these errors and I can't figure a way to fix this.

Angular version is 10.0.5
Sass version is 1.26.5
Sass loader version is 8.0.2

Answer 1

This question has been answered several times already. Please also use the search and vote for questions and answers.

On Stackoverflow: 1 2 3

On the AngularCLI on Github: 1

To fix this import and add to preprocessor.

Update your angular.json file in the patch projects.NAME.architect.test with this

"styles": ["src/styles.scss"],
"stylePreprocessorOptions": {
  "includePaths": ["src/assets/styles"]
},