[BUG] - scss styles not found in v6 #10036

sfabriece · 2018-03-21T13:47:56Z

Versions

<!--
Output from: `ng --version`.
If nothing, output from: `node --version` and `npm --version`.
  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
-->
Angular CLI: 6.0.0-beta.6
Node: 9.5.0
OS: win32 x64
Angular: 6.0.0-rc.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 6.0.0-beta.4
@angular/cli: 6.0.0-beta.6
@angular/material: 6.0.0-beta.4
@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

create an angular project that uses scss

add stylePreprocessorOptions to .angular-cli.json

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

make a styles directory in src/
add a _settings.scss file in src/styles directory
import settings in styles.scss in src/
```
@import 'settings';
```

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 'settings';
^
      File to import not found or unreadable: settings.

Desired behavior

ng serve to work without errors

Mention any other details that might be useful (optional)

The text was updated successfully, but these errors were encountered:

sfabriece · 2018-03-21T14:01:38Z

This seems to be a problem only after updating to 6.0.0-beta.6

dirkluijk · 2018-03-22T09:35:16Z

Confirmed, same here. Won't work for ng build as well.

admosity · 2018-03-26T19:45:30Z

Dupe of #10007

markgoho-EDT · 2018-04-05T20:41:27Z

Workaround: add ./src to the path

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

sfabriece · 2018-04-06T17:59:06Z

This worked for me: notice that I removed ./ from the path. This is probably because the root in angular.json is set to "".

"stylePreprocessorOptions": {
  "includePaths": ["src/scss"]
}

alexciesielski · 2018-04-10T18:42:27Z

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

sfabriece · 2018-04-10T18:45:36Z

@ciesielskico stylePreprocessirOptions go at the same level as styles, not in styles. Hope that helps.

alexciesielski · 2018-04-10T18:56:28Z

I have this now in my serve script:

"serve": {
	"builder": "@angular-devkit/build-angular:dev-server",
	"options": {
		"browserTarget": "waluty-klient:build",
		"stylePreprocessorOptions": {
			"includePaths": ["styles/", "../node_modules/bootstrap/scss"]
		}
	},
	"configurations": {
		"production": {
			"browserTarget": "waluty-klient:build:production"
		}
	}
},

but I'm getting the following error:

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(stylePreprocessorOptions).
Error: Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(stylePreprocessorOptions).
    at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (C:\Users\xxx\node_modules\@angular-devkit\core\src\workspace\workspace.js:139:42)

Can you post your angular.json please?

sfabriece · 2018-04-10T19:38:33Z

@ciesielskico there you go:

{
  "$schema":
    "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "root": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "robots.txt",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ],
            "styles": [
              {
                "input": "src/styles.scss"
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles"]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "src": "src/environments/environment.ts",
                  "replaceWith": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-app:build"
          }
        },
        "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": [
              {
                "input": "styles.scss"
              }
            ],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    },
    "my-app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-app:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "inlineStyle": true,
      "inlineTemplate": true,
      "flat": true,
      "spec": true,
      "prefix": "pre",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "pre"
    }
  }
}

AntonisFK · 2018-04-13T18:57:47Z

@ciesielskico I noticed you have node_modules in your stylePreprocessorOptions change "../node_modules/bootstrap/scss" to "node_modules/bootstrap/scss"

kornect · 2018-05-05T16:36:01Z

I'm having the same issue with importing sass files from node_modules, this seems to work only if you prefix your import statement with a tilde @import '~@material/button/mdc-button'; instead of @import '@material/button/mdc-button';. Though it doesn't completely solve the issue as imports within your sass imports will break too.

ndywicki · 2018-07-02T15:58:28Z

I find a workaround

In vendor.scss adding at the end of the file :

@import './global';

paulmelero · 2018-07-06T09:30:09Z

I have encountered this issue on @v6.0.6. I'm trying to import global scss variables into component's scss styles

SamiChagar · 2018-11-23T22:13:07Z

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.sassLoader (/home/samokaku/propertech/node_modules/sass-loader/lib/loader.js:46:72)
i got this error after doing this command : ng serve -o

raydacosta · 2018-11-25T15:47:11Z

But what about JavaScript, from Node.js, which SOLUTION for this BUG? Can anyone help? Unfortunate in!

raydacosta · 2018-11-25T15:48:54Z

Please, a solution that solves it, because it's been two weeks since I've tried to squeeze from ANDROID java Native to IONIC and this Bug is occurring.

FabioParigi · 2018-11-30T16:38:10Z

npm install node-sass
solve for me
I don't understand why isn't writed here instructions

itboygr · 2018-12-10T08:41:39Z

@FabioParigi Thank You!!!!! :D :D :D

FabioParigi · 2018-12-10T08:44:49Z

@itboygr
It's a pleasure, you are welcome

davidbarrera75 · 2019-03-14T01:01:04Z

npm install node-sass
perfecto funciona bien gracias FabioParigi

xavierluz · 2019-06-26T12:41:49Z

npm install node-sass
https://stackoverflow.com/questions/46419024/error-in-node-modules-css-loader

sfabriece · 2019-06-26T13:31:17Z

for those upgrading to version 8 and finding that sass is broken:

yarn add node-sass fibers -D

as explained in the release notes for version 8

angular-automatic-lock-bot · 2019-09-09T16:41:53Z

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

sfabriece mentioned this issue Mar 21, 2018

[BUG] - scss styles not found in v6 angular/angular#22908

Closed

sfabriece closed this as completed Apr 10, 2018

bellizio mentioned this issue May 7, 2018

stylePreprocessorOptions includePaths do not work in 6.0.0-beta.6 #10007

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] - scss styles not found in v6 #10036

[BUG] - scss styles not found in v6 #10036

sfabriece commented Mar 21, 2018 •

edited

Loading

sfabriece commented Mar 21, 2018

dirkluijk commented Mar 22, 2018

admosity commented Mar 26, 2018

markgoho-EDT commented Apr 5, 2018

sfabriece commented Apr 6, 2018

alexciesielski commented Apr 10, 2018

sfabriece commented Apr 10, 2018

alexciesielski commented Apr 10, 2018 •

edited

Loading

sfabriece commented Apr 10, 2018

AntonisFK commented Apr 13, 2018

kornect commented May 5, 2018

ndywicki commented Jul 2, 2018

paulmelero commented Jul 6, 2018

SamiChagar commented Nov 23, 2018

raydacosta commented Nov 25, 2018

raydacosta commented Nov 25, 2018

FabioParigi commented Nov 30, 2018

itboygr commented Dec 10, 2018

FabioParigi commented Dec 10, 2018

davidbarrera75 commented Mar 14, 2019

xavierluz commented Jun 26, 2019

sfabriece commented Jun 26, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

[BUG] - scss styles not found in v6 #10036

[BUG] - scss styles not found in v6 #10036

Comments

sfabriece commented Mar 21, 2018 • edited Loading

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

sfabriece commented Mar 21, 2018

dirkluijk commented Mar 22, 2018

admosity commented Mar 26, 2018

markgoho-EDT commented Apr 5, 2018

sfabriece commented Apr 6, 2018

alexciesielski commented Apr 10, 2018

sfabriece commented Apr 10, 2018

alexciesielski commented Apr 10, 2018 • edited Loading

sfabriece commented Apr 10, 2018

AntonisFK commented Apr 13, 2018

kornect commented May 5, 2018

ndywicki commented Jul 2, 2018

paulmelero commented Jul 6, 2018

SamiChagar commented Nov 23, 2018

raydacosta commented Nov 25, 2018

raydacosta commented Nov 25, 2018

FabioParigi commented Nov 30, 2018

itboygr commented Dec 10, 2018

FabioParigi commented Dec 10, 2018

davidbarrera75 commented Mar 14, 2019

xavierluz commented Jun 26, 2019

sfabriece commented Jun 26, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

sfabriece commented Mar 21, 2018 •

edited

Loading

alexciesielski commented Apr 10, 2018 •

edited

Loading