Angular-cli: Sass file import not found causing test runner to error/fail

[ashnewport]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Area

- [ ] devkit
- [ ] schematics

Versions

Angular version: 6.0.2


For Tooling issues:
- Node version: 9.11.1
- Platform:  Windows

Current behavior

Running ng test on a project that uses Sass with @import statements in component scss files causes the test runner to error resulting in no tests being executed. Even setting stylePreprocessorOptions.includePaths in angular.json doesn't seem to fix the issue.

Using component scss files or third party (Bootstrap, Material) also have the same issue as above and may be another, but similar problem, with tilde imports, e.g. @import "~@angular/material/theming";.

A current workaround seems to be using relative paths to import, e.g. @import "../../sass/theme";.

I have tried setting karma.conf.js to include Sass but I still get the same error, see How to configure Karma to include global scss files for an angular-cli project?

Repro steps

I have created a sample repo following the below steps and demonstrating the bug. See https://github.com/ashnewport/angular-sass-test

ng new angular-sass-test --style=scss
cd angular-sass-test
ng test
# tests build successfully

Create src/sass directory and new theme.scss for Sass variables.

mkdir src/sass
touch src/sass/theme.scss

Edit theme.scss:

$bg-color: bisque;
$h1-color: cornflowerblue;

Edit src/styles.scss:

@import "theme";
body {
  background-color: $bg-color;
}

Edit angular.json:

// projects.PROJECT-NAME.architect.build.options
...
"stylePreprocessorOptions": {
  "includePaths": [
    "src/sass"
  ]
}
...

At this point ng test will execute correctly.

Edit src/app/app.component.scss:

@import "theme";
h1 {
  color: $h1-color;
}

Execute ng test in terminal and the result is:

...
ERROR in ./src/app/app.component.scss
Module build failed:
@import "theme";
^
      File to import not found or unreadable: theme.
      in C:\Users\me\angular-sass-test\src\app\app.component.scss (line 1, column 1)
 @ ./src/app/app.component.ts 18:21-52
 @ ./src/app/app.component.spec.ts
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts

The log given by the failure

...
ERROR in ./src/app/app.component.scss
Module build failed:
@import "theme";
^
      File to import not found or unreadable: theme.
      in C:\Users\me\angular-sass-test\src\app\app.component.scss (line 1, column 1)
 @ ./src/app/app.component.ts 18:21-52
 @ ./src/app/app.component.spec.ts
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts

Desired functionality

I am trying to reuse my Sass variables, mixins, and functions from a theme.scss file in my Angular component Sass files, *.component.scss. Currently this works when running a build or serve on the application however unit testing cannot run without a workaround (see above) which doesn't seem like the correct way to be coding a project.

ng test should execute unit tests and resolve @import statements as per ng serve or ng build. If the includePaths are defined then there shouldn't be a need to import with relative paths, e.g. @import "../../sass/theme.scss";.

I think when a project is created with the --style=scss flag or configured as such then ng test should run without error. So if this is a Karma config issue/error, then it should be configured correctly at creation, e.g. ng new ....

Mention any other details that might be useful

Just mentioning again that the ng build or ng serve have no issues with @import "theme" when the angular.json property for stylePreprocessorOptions.includePaths is set. The current workaround to ensure previous commands and ng test run is to specify a relative path to the Sass partial, e.g. @import "../../sass/theme.scss";.
Try for yourself by running ng test on the repo and commenting/uncommenting lines 2 and 4 in src/app/app.component.scss.

_Previously reported the same issue incorrectly in the angular repo; closing and opening a new one here. See https://github.com/angular/angular/issues/24337_

[KiCD]

@ashnewport Adding stylePreprocessorOptions.includePaths to architect.test in angular.json fixes the issue.

"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/sass"
]
},

[ashnewport]

@KiCD it seems so simple and yet I somehow missed that. Thanks for helping.

Marking this as closed due to it being my error and the solution above solves the issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}