【问题标题】:Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"Angular 6 到 12 迁移:收到多个警告:Css Minimizer 插件:> 意外的“$”
【发布时间】:2021-11-01 13:27:38
【问题描述】:

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

如果在 angular.json 中我设置了优化:错误配置,那么所有问题都会得到解决,但我不想进行此更改,它应该只是真实的。

经过优化:是的,我收到了所有这些警告:-

之前的相同代码运行良好,没有任何警告。

assets/.../variables.scss - Warning: Css Minimizer Plugin:  > assets/.../variables.scss:6:0: warning: Unexpected "$"
    6 │ $color-normal-gray:#8a8a8a;
      ╵ ^

assets/.../global.scss - Warning: Css Minimizer Plugin:  > 
assets/.../global.scss:285:2: warning: Expected identifier but found "."
    285 │   .dropdown-menu{
        ╵   ^

assets/.../global.scss - Warning: Css Minimizer Plugin:  > 
assets/.../global.scss:255:6: warning: Expected identifier but found "*"
    255 │       *background-color: #d9d9d9;
        ╵       ^

assets/.../master.scss - Warning: Css Minimizer Plugin:  > 
assets/.../master.scss:567:8: warning: Expected ":" but found "{"
    567 │   circle {
        ╵          ^

我的 Package.json 如下:

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

【问题讨论】:

  • 您使用 Angular 的自定义 webpack。这就是它的来源。与您的 css 加载器关联的 webpack 配置是什么?
  • 这是一个微型应用程序,我使用的是标准 webpack 配置的 single-spa-angular,它是按照 (singleSpaAngularWebpack = require("single-spa-angular/lib/webpack"))
  • 我没有任何自定义 webpack。我也看到了。
  • 您是否跳过了中间版本?
  • 你有一个示例项目我们可以复制它吗?如果我们无法重现它,我们就无法真正想出修复方法。

标签: angular angular12


【解决方案1】:

我遇到了同样的问题。您应该将“assets/.../variables.scss”的导入更改为“./assets/.../variables.scss”。在我的例子中,它在 styles.scss 中,但它可以在每个 .scss 文件中。

【讨论】:

    【解决方案2】:

    尝试在tsconfig.json 文件中禁用 Ivy 引擎:

    如果您使用的是一些与 Ivy 不兼容的过时软件包。

    "angularCompilerOptions": {"enableIvy": false}
    

    或者,让我们一个一个运行以下命令来试一试:

    如果您直接将 Angular 6 升级到 Angular 12,那么可能会出现一些问题。

    ng update @angular/core@7 @angular/cli@7 --force
    ng update @angular/core@8 @angular/cli@8 --force
    ng update @angular/core@9 @angular/cli@9 --force
    ng update @angular/core@10 @angular/cli@10 --force
    ng update @angular/core@11 @angular/cli@11 --force
    ng update @angular/core@12 @angular/cli@12 --force
    

    或者,只运行以下命令:

    ng update @angular/core --force
    

    【讨论】:

    • 感谢您的回复。我还没有尝试禁用 Ivy,因为这看起来更像是一种 hack 而不是解决方案。我尝试了您的建议以强制更新。但是,这并没有解决问题。
    【解决方案3】:

    我遇到了同样的问题,我发现在我的情况下,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 文件夹内有一堆样式表代码,scsslesscss,似乎 CSS Minifier 只是试图将那里的所有内容都当作纯 CSS 处理。 解决方案是从此资产中删除任何未处理的样式表,并将它们留在angular.json 上的styles 配置下。这对我有用,希望对你也有帮助!

    【讨论】:

      【解决方案4】:

      在我看来,问题来自与single-spa-angular架构相关的配置文件,虽然错误只是说:

      我正在尝试缩小项目中的 Sass css 文件,但语法是 未知!可能我对 Sass 文件的语法一无所知!

      由于我们无法重现问题,而且在具有多个配置文件的 SPA 平台中查找警告的来源是一项艰巨的工作,但是,有一个直接的方法可以找到问题或立即在您自己的机器上重现该项目,该项目与为 Angular 12 制作的single-spa-angular repository 进行比较或分叉。从 Angular 6 迁移到 12 本身有一些陷阱,但是您也试图使此类库具有隐藏行为。

      【讨论】:

        【解决方案5】:

        如前所述...插件需要 CSS 而不是 SCSS 作为输入: https://webpack.js.org/plugins/mini-css-extract-plugin/

        angular.json 会相当相关...

        【讨论】:

          【解决方案6】:

          在我的 package.json 中 node-sass 丢失了。

          所以在安装最新版本的node-sass之后

          我的所有与 CSS 相关的错误都已解决,请尝试让我们发布消息。

          这个解决方案应该可以工作!

          npm install node-sass@latest 
          

          【讨论】:

          • 这就是为什么我已经卸载它并安装了 sass 但之后,我开始收到错误...但是如果你在 NPM 中查看 node-sass 包页面,他们已经在 3 个月前发布了最新版本只要。所以平均时间你可以同时保留。我认为 SASS 版本还需要更多更新
          • 或者如果您暂时不想使用 node-sass。你可以不断更新你的 sass 包。由于 SASS 开发团队非常频繁地发布新版本,您也可以查看:npmjs.com/package/sassgithub.com/sass/dart-sass
          • 这并不能解决我的问题。并且这个库将在 Angular 的未来版本中被弃用。本主题详细解释了 node-sass 库的缺点。 --> .stackoverflow.com/questions/65594119/…
          【解决方案7】:

          您的问题与 scss 文件的处理有关。这个问题在67607413中有详细说明。很快,如果从 assets 文件夹中删除或省略 scss 文件,这个问题就会得到解决。我更喜欢省略 SCSS 文件。

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

          【讨论】:

            【解决方案8】:

            在我的例子中,singleSpaWebpackConfig.optimization.minimizer/ 中有两个(!)CssMinimizerPlugins,一个只针对 css,一个针对 css|scss|sass|less|styl

            我检查了 angular 11 webpack 配置,它没有用于 css|scss|sass|less|styl 的 CssMinimizerPlugins

            我还检查了 singleSpaAngularWebpack 助手。而且它没有添加这个插件

            我为 css|scss|sass|less|styl 排除 CssMinimizerPlugins 的解决方法:

            singleSpaWebpackConfig.optimization.minimizer = singleSpaWebpackConfig.optimization.minimizer
            .filter(plugin => plugin.constructor.name !== 'CssMinimizerPlugin' || plugin.options?.test?.toString().indexOf('less') === -1);
            

            【讨论】:

              【解决方案9】:

              我也遇到过这个问题。 ng serve 中似乎有一些变化。现在生产版本是默认配置。

              您必须在 angular.json

              buildserve 节点上添加 development 选项
              // >> projects[YOUR_PROJECT_NAME].architect.build.configurations
              "configurations": {
                "development": {
                  "buildOptimizer": false,
                  "optimization": false,
                  "vendorChunk": true,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "namedChunks": true
                },
              // >> projects[YOUR_PROJECT_NAME].architect.serve
              "serve": {
                "defaultConfiguration": "development",
                "configurations": {
                  "development": {
                    "browserTarget": "YOUR_PROJECT_NAME:build:development"
                  },
              

              【讨论】:

                猜你喜欢
                • 2020-01-09
                • 2023-04-08
                • 1970-01-01
                • 2019-03-26
                • 2018-10-18
                • 2022-08-11
                • 2020-06-09
                • 2019-01-26
                • 2018-10-18
                相关资源
                最近更新 更多