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

Pickerelweed

Can you post all your angular.json please? or at least ng-test and ng-build/serve sections? – Module

Please double check whether you are running ng test from your root directory. – Away

@RazRonen Thank you very much! I haven't figured out that ng-test section should include its own includePaths property. – Pickerelweed

@Away thank you...made me feel dumb but fixed my problem. – Elaterium

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"]
},

Eckenrode

I think It is mentioned that this line is already added in the angular.json – Dramaturgy

well, yes, see comments above. ng-test section should include its own includePaths. The error was that includePaths did not include styles, as my answer states. dont know why down voted, but that's how Stackoverflow works no? – Eckenrode

Answer 2

It does appear that in angular.json there are multiple sections that need the "styles" and "styleprocessor", once in projects/architect/build/options (see below) AND projects/architect/test/options too!

"projects":{
           ...
    "architect":{ 
                 ...
                 "build": {
                          ...
                          "options": {
                                ....
                                    "stylePreprocessorOptions": {
                                        "includePaths": ["node_modules"]
                                     },
                                    "styles": [
                                     {
                                       "input": "node_modules/@module_name/whatever_style.scss",
                                      }

                           }
                }
}

Evanesce