angular-cli: [BUG] - scss styles not found in v6

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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 23 (1 by maintainers)

Most upvoted comments

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

+13

FabioParigi on Nov 30, 2018

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

+10

sfabriece on Apr 10, 2018

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

SamoKaku on Nov 23, 2018

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.

raydacosta on Nov 25, 2018

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

alexciesielski on Apr 10, 2018

Workaround: add ./src to the path

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

markgoho-EDT on Apr 5, 2018

Dupe of #10007

admosity on Mar 26, 2018