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

Can you post all your angular.json please? or at least `ng-test` and `ng-build/serve` sections? — Raz Ronen, Aug 06 '20 at 11:00
Please double check whether you are running `ng test` from your root directory. — uiTeam324, Aug 06 '20 at 11:04
@RazRonen Thank you very much! I haven't figured out that `ng-test` section should include its own `includePaths` property. — Dronich, Aug 06 '20 at 11:07
@uiTeam324 thank you...made me feel dumb but fixed my problem. — Mitchell Brooks, Sep 30 '20 at 16:03

score 17 · Answer 1 · answered Nov 24 '20 at 15:05

17

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

answered Nov 24 '20 at 15:05

Mario

870
9
20

3

I think It is mentioned that this line is already added in the angular.json – Ankur Sardar Mar 04 '21 at 05:45
2

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? – Mario Mar 04 '21 at 13:23

score 1 · Answer 2 · answered Jan 20 '23 at 13:15

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

                           }
                }
}

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

2 Answers2

Linked