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

Answer 1

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
          }
        ]
      }
    ]
  }
};

Answer 2

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.