imported sass files in styles.scss are not found

Question

Angular can't find my sass files.

Here's a sample error whenever i run ng serve

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-builders/custom-webpack/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??ref--17!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'variables'
  in [
    /home/chan-dev/Coding/angular/theme-switcher-demo/src
  ]
    at /home/chan-dev/Coding/angular/theme-switcher-demo/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/home/chan-dev/Coding/angular/theme-switcher-demo/node_modules/postcss/lib/lazy-result.js:331:11)
    at async Object.loader (/home/chan-dev/Coding/angular/theme-switcher-demo/node_modules/postcss-loader/dist/index.js:94:14)

Here's my directory structure.

.
└── src/
    ├── app
    ├── assets
    ├── environments
    ├── styles/
    │   ├── _theme.scss
    │   └── _variables.scss
    └── styles.scss

styles.scss content

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* You can add global styles to this file, and also import other style files */
@import 'variables';
@import 'theme';

Already added includePaths in angular.json. Note that my angular.json uses @angular-builders/custom-webpack:browser.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "theme-switcher-demo": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true,
          "inlineStyle": true,
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "webpack.config.js"
            },
            "outputPath": "dist/theme-switcher-demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles"]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "theme-switcher-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "theme-switcher-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "theme-switcher-demo: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": []
          }
        },
        "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": "theme-switcher-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "theme-switcher-demo:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "theme-switcher-demo"
}

I am having the exact same issue, did you find the solution? — xingkong, Dec 17 '20 at 06:37
@xingkong, the workaround i did was to import with underscore and file extension. So if you want to import partial.scss then just do `@import _partial.scss`. There seems to be a bug with partials. Here's the [link](https://stackoverflow.com/a/58152757/9732932) — The.Wolfgang.Grimmer, Dec 17 '20 at 06:50
Thanks @The.Wolfgang.Grimmer, I found the solution for this. It was missing the sass-load. I will put the details in the answer. — xingkong, Dec 18 '20 at 05:37

score 4 · Answer 1 · answered Dec 18 '20 at 05:42

I am having the exact same issue and assuming you are adding tailwind into the angular project.

It turns out the root cause is the custom webpack config for tailwind. problem solved after I added the additional sass-loader to the scss files. Here is my webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {

              postcssOptions: {
                importLoaders: 1,
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  require('postcss-import'),
                  require('tailwindcss'),
                  require('autoprefixer'),
                ]
              }
            }
          },
          {
            loader: 'sass-loader' // This is the fix
          }
        ]
      }
    ]
  }
};

Thanks, I'm not using Tailwind, but your code helped me to setup PostCSS in a Angular 11 project. — certainlyakey, Mar 18 '21 at 22:57

score 1 · Answer 2 · answered Nov 14 '20 at 10:41

1

Looks like this may be a duplicate of stylePreprocessorOptions angular 8

Instead of adding your path, you could always make a src/styles/index.scss and import your styles:

@import "_theme.scss";
@import "_variables.scss";

Then add it to your @angular-builders/custom-webpack:browser style list.

answered Nov 14 '20 at 10:41

John

1,240
9
13

thanks, followed your answer, but it still the same result. Regardless if i import names using the following formats `_nameOfFile.scss` or without underscore `nameOfFile.scss`. – The.Wolfgang.Grimmer Nov 14 '20 at 11:12

imported sass files in styles.scss are not found

2 Answers2