Angular-cli: stylePreprocessorOptions includePaths do not work in 6.0.0-beta.6

[euangoddard]

Versions

@angular/cli: 6.0.0-beta.6
@angular-devkit/architect: 0.0.7
@angular-devkit/build-optimizer: 0.4.6
@angular-devkit/build-webpack: 0.0.7
@angular-devkit/core: 0.4.6
@angular-devkit/schematics: 0.4.6
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.6
@schematics/angular: 0.4.6
@schematics/package-update: 0.4.6
typescript: 2.7.2
webpack: 4.1.1

Repro steps

• Set up a brand new CLI project using ng new --next ng6
• Configure the files as per this E2E test

Observed behavior

ERROR in ../node_modules/@angular-devkit/build-webpack/src/angular-cli-files/plugins/raw-css-loader.js!../node_modules/postcss-loader/lib??embedded!../node_modules/sass-loader/lib/loader.js??ref--14-3!./styles.scss
Module build failed: 
@import "variables";
^
      File to import not found or unreadable: variables.
Parent style sheet: stdin
      in /Users/euan/Sites/ng6/src/styles.scss (line 2, column 1)

Desired behavior

This type of SCSS/Sass import should work out of the box.

[sandangel]

same here, changed to relative path but it doesnt work too

[BhaskaranR]

worked for me. check if the root is empty and change

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

to

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

[ciesielskico]

Where in angular.json do you guys add the stylePreprocessorOptions?

[sandangel]

@ciesielskico you should add it like this

            "styles": [
              {
                "input": "src/styles.scss"
              },
              {
                "input": "node_modules/bootstrap/scss/bootstrap.scss"
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["./src", "./folder/you/want/to/include"]
            },
            "scripts": []

[euangoddard]

@sandangel that works fine. It looks like this has been fixed now

[MickL]

@sandangel Don't add ./:

"stylePreprocessorOptions": {
"includePaths": ["src", "folder/you/want/to/include"]
},

[bellizio]

I'm having the same issue after upgrading to version 6. I've tried everything noted here and in the other related issues (#10036, #10473) for this bug, but have not had any luck.

In my case, I am importing a variables.scss file in a number of component files, so the error is something like the following:

ERROR in Module build failed:
@import 'variables';
^
      File to import not found or unreadable: variables.
      in /ng6/src/app/home/home.component.scss (line 1, column 1)

Update: I was missing stylePreprocessorOptions in my server app config. My app is using server-side rendering via angular universal, so stylePreprocessorOptions is required in the build 'options' there as well.

[christo8989]

I was getting this error on ng test and @bellizio 's comment made me realize I was missing the stylePreprocessorOptions inside that part of the configuration.

[Askiater]

@MickL For me it works in both ways.
Like this:
"stylePreprocessorOptions": { "includePaths": [ "src/", "src/styles/" ]
And like this also:
"stylePreprocessorOptions": { "includePaths": [ "./src/", "./src/styles/" ]

[jderus]

Just wanted to add that if you may need to kill and restart the ng serve process if the stylePreprocessorOptions workaround is not working for you.

[tahiryasin]

I'm having the same issue after upgrading to version 6. I've tried everything noted here and in the other related issues (#10036, #10473) for this bug, but have not had any luck.

In my case, I am importing a variables.scss file in a number of component files, so the error is something like the following:

ERROR in Module build failed:
@import 'variables';
^
      File to import not found or unreadable: variables.
      in /ng6/src/app/home/home.component.scss (line 1, column 1)

Update: I was missing stylePreprocessorOptions in my server app config. My app is using server-side rendering via angular universal, so stylePreprocessorOptions is required in the build 'options' there as well.

Could anyone please tell me how can I add stylePreprocessorOptions in build options?

My angular.json looks like

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "stylePreprocessorOptions": {
              "includePaths": [
                "src"
              ]
            },
...
...

[ArthurianX]

Just upgraded from @angular-cli 8.0.2 to 8.2.0 and this isn't working anymore.

I have no example as the codebase is huge, the only gotcha is that in an scss project I was including paths for sass files and it worked.

If I add the full path it still works so I believe it's something from the new version, or is it ?
Anyone else?

[themaga]

Finally it works!! - Angular: 8.2.2

src/stylings/_mixins.scss

"stylePreprocessorOptions": {
    "includePaths": [
        "src/", "src/stylings/
     ]
}

@import "mixins";

[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._}