Angular 6 到 12 迁移：收到多个警告：Css Minimizer 插件：> 意外的“$”

Question

将我的 Angular 6 项目迁移到 12 后。\n我在终端中收到多个警告

\n

如果在 angular.json 中我设置了 optimization: false 配置，那么所有问题都会得到解决，但我不想进行此更改，它应该只是 true 。

\n

经过优化：是的，我收到所有这些警告：-

\n

早期相同的代码运行良好，没有任何警告。

\n

assets/.../variables.scss - Warning: Css Minimizer Plugin:  > assets/.../variables.scss:6:0: warning: Unexpected "$"\n    6 \xe2\x94\x82 $color-normal-gray:#8a8a8a;\n      \xe2\x95\xb5 ^\n\nassets/.../global.scss - Warning: Css Minimizer Plugin:  > \nassets/.../global.scss:285:2: warning: Expected identifier but found "."\n    285 \xe2\x94\x82   .dropdown-menu{\n        \xe2\x95\xb5   ^\n\nassets/.../global.scss - Warning: Css Minimizer Plugin:  > \nassets/.../global.scss:255:6: warning: Expected identifier but found "*"\n    255 \xe2\x94\x82       *background-color: #d9d9d9;\n        \xe2\x95\xb5       ^\n\nassets/.../master.scss - Warning: Css Minimizer Plugin:  > \nassets/.../master.scss:567:8: warning: Expected ":" but found "{"\n    567 \xe2\x94\x82   circle {\n        \xe2\x95\xb5          ^\n

\n

我的 Package.json 如下：

\n

 "dependencies": {\n    "@angular/animations": "^12.2.3",\n    "@angular/cdk": "^12.2.2",\n    "@angular/common": "^12.2.3",\n    "@angular/compiler": "^12.2.3",\n    "@angular/core": "^12.2.3",\n    "@angular/forms": "^12.2.3",\n    "@angular/http": "^7.2.16",\n    "@angular/material": "^12.2.3",\n    "@angular/platform-browser": "^12.2.3",\n    "@angular/platform-browser-dynamic": "^12.2.3",\n    "@angular/router": "^12.2.3",\n    "@fortawesome/fontawesome-free": "^5.15.4",\n    "@ngrx/store": "^6.1.0",\n    "@okta/okta-angular": "^3.0.1",\n    "@okta/okta-auth-js": "^4.7.1",\n    "angular-datatables": "^0.6.4",\n    "angular-image-slider": "0.0.8",\n    "autobind-decorator": "^2.4.0",\n    "bootstrap": "^4.6.0",\n    "core-js": "^2.5.4",\n    "file-saver": "^2.0.2",\n    "gulp-cli": "^2.3.0",\n    "json-bigint": "^1.0.0",\n    "jsrsasign": "^10.3.0",\n    "lodash": "4.17.10",\n    "ng-simple-slideshow": "^1.2.4",\n    "ng2-scroll-to-el": "^1.2.1",\n    "ng2-search-filter": "^0.4.7",\n    "ngx-filter-pipe": "^2.1.2",\n    "ngx-logger": "3.3.11",\n    "ngx-order-pipe": "^2.0.1",\n    "ngx-pagination": "^3.2.0",\n    "pagination": "file:src/app/packages/pagination-0.0.1.tgz",\n    "rxjs": "7.3.0",\n    "rxjs-compat": "^6.3.2",\n    "sass": "^1.36.0",\n    "single-spa": "^5.9.2",\n    "single-spa-angular": "^5.0.2",\n    "systemjs": "^6.8.3",\n    "true-case-path": "^1.0.3",\n    "tslint": "^6.0.0",\n    "xlsx": "^0.17.1",\n    "zone.js": "~0.11.4"\n  },\n  "devDependencies": {\n    "@angular-builders/custom-webpack": "^12.1.1",\n    "@angular-devkit/build-angular": "^12.2.2",\n    "@angular-eslint/builder": "12.3.1",\n    "@angular-eslint/eslint-plugin": "12.3.1",\n    "@angular-eslint/eslint-plugin-template": "12.3.1",\n    "@angular-eslint/schematics": "12.3.1",\n    "@angular-eslint/template-parser": "12.3.1",\n    "@angular/cli": "^12.2.2",\n    "@angular/compiler-cli": "^12.2.3",\n    "@angular/language-service": "^12.2.3",\n    "@ng-bootstrap/ng-bootstrap": "^10.0.0",\n    "@types/bootstrap": "^4.1.2",\n    "@types/jasmine": "2.8.6",\n    "@types/jasminewd2": "2.0.3",\n    "@types/lodash": "4.14.110",\n    "@types/node": "14.6.2",\n    "@typescript-eslint/eslint-plugin": "4.28.2",\n    "@typescript-eslint/parser": "4.28.2",\n    "await": "^0.2.6",\n    "cheerio": "^1.0.0-rc.2",\n    "codelyzer": "~4.2.1",\n    "eslint": "^7.26.0",\n    "font-awesome": "^4.7.0",\n    "fs-promise": "^2.0.3",\n    "gulp": "^4.0.2",\n    "gulp-inline-css": "^3.3.0",\n    "gulp-inline-source": "^4.0.0",\n    "htmlhint-ng2": "0.0.13",\n    "husky": "^1.3.1",\n    "jasmine-core": "~2.99.1",\n    "jasmine-spec-reporter": "~4.2.1",\n    "karma": "^6.3.4",\n    "karma-chrome-launcher": "^2.2.0",\n    "karma-coverage-istanbul-reporter": "^2.1.1",\n    "karma-jasmine": "~1.1.1",\n    "karma-jasmine-html-reporter": "^0.2.2",\n    "karma-junit-reporter": "^1.2.0",\n    "mediaquery-text": "1.0.7",\n    "ng-bullet": "^1.0.3",\n    "protractor": "^5.4.2",\n    "puppeteer": "^1.14.0",\n    "sonar-scanner": "^3.1.0",\n    "ts-node": "~5.0.1",\n    "tslint": "~5.9.1",\n    "tslint-sonarts": "^1.9.0",\n    "typescript": "^4.3.5"\n  }\n

\n

Answer 1

您的问题与 scss 文件的处理有关。这个问题在67607413中有详细介绍。很快，如果从资产文件夹中删除或省略 scss 文件，这个问题将得到解决。我更喜欢省略 SCSS 文件。

"assets": [
    "src/favicon.ico",
    {
        "glob": "**/*",
        "input": "src/assets/",
        "ignore": ["**/*.scss"],
        "output": "/assets/"
    },
    ...
]

Answer 2

我遇到了同样的问题，我发现在我的情况下资产配置angular.json是罪魁祸首。从配置中检查这段代码：

"architect": {
    "build": {
      "builder": "ngx-build-plus:build",
      "options": {
        "aot": true,
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "tsConfig": "src/tsconfig.app.json",
        "polyfills": "src/polyfills.ts",
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
}
}

该src/assets文件夹内有一堆样式表代码，scss，less，css并且 CSS Minifier 似乎只是尝试将其中的所有内容作为纯 CSS 处理。解决方案是从此资产中删除任何未处理的样式表，并将它们保留styles在angular.json. 这对我来说很有效，希望对你也有帮助！