stylePreprocessorOptions angular 8
Solution 1
I found same bug when started new app with Angular 8. It says "Can't find stylesheet to import." even for properly declared imports. After small investigation i found that it is related to sass-loader bug https://github.com/webpack-contrib/sass-loader/issues/704 I hope it will be fixed soon, but meanwhile there is a workaround:
For existing _mixins.scss
in your stylePreprocessorOptions / includePaths, use filename including first underscore
@import '_mixins';
instead of more pretty, but currently buggy
@import 'mixins';
Solution 2
Be aware that if you use scss when you import as prefix you need specify type. @import "colors.scss";
Solution 3
Please checkout your paths once again. In my case the problem was solved by including src
like this:
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/styles",
]
felixo
Updated on July 09, 2022Comments
-
felixo almost 2 years
I am following this to add importable scss files through stylePreprocessorOptions in Angular 8 but I keep getting the error that it is not being found. Any input is apreciated, this neat trick is very useful!
below is my angular.json
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "thebearcottages-app": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss", "skipTests": true }, "@schematics/angular:class": { "skipTests": true }, "@schematics/angular:directive": { "skipTests": true }, "@schematics/angular:guard": { "skipTests": true }, "@schematics/angular:module": { "skipTests": true }, "@schematics/angular:pipe": { "skipTests": true }, "@schematics/angular:service": { "skipTests": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/thebearcottages-app", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": false, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss", ], "stylePreprocessorOptions": { "includePaths": [ "src/styling/" ] }, "scripts": [ "node_modules/jquery/dist/jquery.min.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "thebearcottages-app:build" }, "configurations": { "production": { "browserTarget": "thebearcottages-app:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "thebearcottages-app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "**/node_modules/**" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "thebearcottages-app:serve" }, "configurations": { "production": { "devServerTarget": "thebearcottages-app:serve:production" } } } } }}, "defaultProject": "thebearcottages-app" }
This is the error that I am getting:
ERROR in ./src/app/content-component/gallery/gallery.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import "grid"; ^ Can't find stylesheet to import. ╷ 1 │ @import "grid"; │ ^^^^^^ ╵ stdin 1:9 root stylesheet in /Users/konstantinurban/Desktop/thebearcottages/src/app/content-component/gallery/gallery.component.scss (line 1, column 9)
-
damian over 4 yearsSorry, it would be:
"stylePreprocessorOptions": { "includePaths": [...
-
Kavitha Karunakaran over 4 yearsYou can edit the answer you provided to include the typo mentioned in comment
-
Kerim092 over 2 yearsdamn! thanks a lot!