postcss-import + angular nebular + webpack not working

Hi,

For some reason postcss-import isn’t recognizing anything from ~@nebular/*. I have verified that the packages are installed and are valid.

https://github.com/Buttars/ng-support-ticket/tree/postcss-error

Error Message

ERROR in ./src/styles.scss (./node_modules/@angular-builders/custom-webpack/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/@angular-builders/custom-webpack/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 '~@nebular/theme/styles/theming'
  in [
    /home/buttars/development/ng-quiz/src
  ]
    at /home/buttars/development/ng-quiz/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/home/buttars/development/ng-quiz/node_modules/postcss/lib/lazy-result.js:335:11)
    at async Object.loader (/home/buttars/development/ng-quiz/node_modules/postcss-loader/dist/index.js:94:14)

ERROR in Tried to overwrite /home/buttars/development/ng-quiz/node_modules/@angular/common/http/http.d.ts.__ivy_ngcc_bak with an ngcc back up file, which is disallowed.

styles.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@import 'themes.scss';
@import '~@nebular/theme/styles/globals';

@include nb-install() {
  @include nb-theme-global();
}

body {
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

themes.scss

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((), default, default);

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: [
              require('postcss-import'),
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      },
    ],
  },
};

package.json

{
  "name": "ng-support-ticket",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prod": "NODE_ENV=production ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.2",
    "@angular/cdk": "^11.0.1",
    "@angular/common": "~11.0.1",
    "@angular/compiler": "~11.0.1",
    "@angular/core": "~11.0.1",
    "@angular/forms": "~11.0.1",
    "@angular/platform-browser": "~11.0.1",
    "@angular/platform-browser-dynamic": "~11.0.1",
    "@angular/router": "~11.0.1",
    "@datorama/akita": "^4.0.0",
    "@datorama/akita-ng-entity-service": "^1.0.0",
    "@nebular/eva-icons": "^6.2.1",
    "@nebular/theme": "^6.2.1",
    "eva-icons": "^1.1.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^10.0.1",
    "@angular-devkit/build-angular": "^0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@datorama/akita-ng-router-store": "^3.1.3",
    "@datorama/akita-ngdevtools": "^3.0.2",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.0.4",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ngx-build-plus": "^10.1.1",
    "ngx-tailwind": "^1.0.0",
    "postcss": "^8.1.10",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-scss": "^3.0.4",
    "protractor": "~7.0.0",
    "tailwindcss": "^2.0.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },
  "akitaCli": {
    "basePath": "./src/app/",
    "template": "angular"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng-quiz": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "outputPath": "dist/ng-quiz",
            "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"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "browserTarget": "ng-quiz:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-quiz:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng-quiz:build"
          }
        },
        "test": {
          "builder": "ngx-build-plus: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": "ng-quiz:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-quiz:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "ng-quiz",
  "cli": {
    "defaultCollection": "@datorama/akita"
  }
}

[RyanZim]

Oh, just looked at the package you’re importing from. The filenames start with _, which is a sass thing that postcss-import doesn’t support. Also, they use .scss, which isn’t an extension postcss-import searches for. So your code should be:

@import '@nebular/theme/styles/_theming.scss';
@import '@nebular/theme/styles/themes/_default.scss';

Alternately, you could pass a custom resolve option, but that’s significantly more complicated.

[iamsee]

@Buttars Did you solve it? Same problem