模块构建失败,错误:找不到 css

时间:2021-07-05 03:34:36

标签: node.js angular npm webpack postcss-loader

当我尝试从 angular 7 升级到 8 时出现以下错误。

ERROR in ./src/css/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--15-3!./src/css/styles.scss)

模块构建失败(来自 ./node_modules/postcss-loader/src/index.js):

Error: Failed to find 'assets/fonts/my-css/mycss.css'
  in [
    \src\css
  ]
    at resolveModule.catch.catch (\node_modules\postcss-import\lib\resolve-id.js:35:13)

这是我的 package.json

{
  "name": "testproject",
  "version": "1.7.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.4",
    "@angular/cdk": "~8.1.4",
    "@angular/common": "~8.2.4",
    "@angular/compiler": "~8.2.4",
    "@angular/core": "~8.2.4",
    "@angular/forms": "~8.2.4",
    "@angular/material": "~8.1.4",
    "@angular/material-moment-adapter": "~8.2.3",
    "@angular/platform-browser": "~8.2.4",
    "@angular/platform-browser-dynamic": "~8.2.4",
    "@angular/router": "~8.2.4",
    "@ng-select/ng-select": "^3.0.0",
    "@tinymce/tinymce-angular": "^3.6.1",
    "ag-grid": "^17.1.1",
    "ag-grid-angular": "^17.1.0",
    "angular2-lightbox": "^1.4.1",
    "bootstrap": "^4.6.0",
    "chart.js": "^2.9.4",
    "core-js": "^3.3.1",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "mydaterangepicker": "4.2.1",
    "ng2-pdf-viewer": "^5.3.4",
    "ngx-bootstrap": "^5.6.0",
    "ngx-moment": "^5.0.0",
    "popper.js": "^1.16.1",
    "primeng": "7.0.3",
    "rxjs": "~6.5.2",
    "rxjs-compat": "~6.5.2",
    "rxjs-tslint": "^0.1.8",
    "tinymce": "^4.9.11",
    "ts-helpers": "^1.1.2",
    "ts-md5": "^1.2.9",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.1",
    "@angular/cli": "~8.3.1",
    "@angular/compiler-cli": "~8.2.4",
    "@angular/language-service": "~8.2.4",
    "@types/jasmine": "~3.4.0",
    "@types/jasminewd2": "~2.0.6",
    "@types/lodash": "4.14.108",
    "@types/node": "~8.9.4",
    "codelyzer": "~5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "~1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.20.1",
    "typescript": "~3.5.3",
    "webdriver-manager": "12.0.6"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Tool": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "preserveSymlinks": true,
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/ag-grid/dist/styles/ag-grid.css",
              "node_modules/ag-grid/dist/styles/theme-fresh.css",
              "node_modules/angular2-lightbox/lightbox.css",
              "src/css/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/tinymce/tinymce.js",
              "node_modules/tinymce/themes/modern/theme.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/chart.js/dist/Chart.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {            
            "browserTarget": "Tool:build"            
          },          
          "configurations": {
            "production": {
              "browserTarget": "Tool:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Tool:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/tinymce/tinymce.js",
              "node_modules/tinymce/themes/modern/theme.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/chart.js/dist/Chart.js"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/ag-grid/dist/styles/ag-grid.css",
              "node_modules/ag-grid/dist/styles/theme-fresh.css",
              "node_modules/angular2-lightbox/lightbox.css",
              "src/css/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "Tool-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "Tool:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Tool",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

1 个答案:

答案 0 :(得分:0)

当我改变路径时错误消失了 @import "~assets/fonts/my-css/mycss.css"; 到 @import "~../assets/fonts/my-css/mycss.css"; 在_material.theme.css