Angular 6 到 12 迁移：收到多个警告：Css Minimizer 插件：> 意外的“$”
Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"
将我的 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"
}
我遇到了同样的问题。您应该将 'assets/.../variables.scss' 的导入更改为“./assets/.../variables.scss”。在我的例子中，它在 styles.scss 中，但它可以在每个 .scss 文件中。
尝试在 tsconfig.json 文件中禁用 Ivy 引擎：
In case if you are using some outdated package which is not compatible with Ivy.
"angularCompilerOptions": {"enableIvy": false}
或者，让我们通过 运行 一条一条地执行以下命令来尝试一下：
In case if you are upgrading Angular 6 to Angular 12 directly then there might be some issues.
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
我遇到了同样的问题，我发现在我的案例中 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 来处理。
解决方案是从此资产中删除任何未处理的样式表，并将它们保留在 angular.json 上的 styles 配置下。这对我有用，希望对你也有帮助！
在我看来，问题出在与 single-spa-angular 体系结构相关的 配置文件 上，尽管错误只是说：
I'm trying to minify Sass css files in your project but the syntax is
unknown! Perhaps I don't know anything about the syntax of Sass files!
由于我们无法重现该问题，而且很难在具有多个配置文件的 SPA 平台中找到警告的来源，但是，有一个 直接的方法 立即在您自己的机器上找到问题或重现该项目，该项目正在与为 Angular 12 制作的 single-spa-angular repository 进行比较或分叉。从 Angular 6 迁移到 12 有一些陷阱本身，但是您还试图使此类库具有隐藏的行为。
如前所述...插件需要 CSS 而不是 SCSS 作为输入：
https://webpack.js.org/plugins/mini-css-extract-plugin/
angular.json 会很相关...
在我的 package.json node-sass 中丢失了。
所以在安装最新版本的节点后-sass
我所有 CSS 相关的错误都已解决，请尝试让我们知道。
这个解决方案应该有效！
npm install node-sass@latest
您的问题与scss文件的处理有关。这个问题在中有详细说明。简而言之，如果从 assets 文件夹中删除或省略 scss 文件，这个问题就会得到解决。我更喜欢省略 SCSS 文件。
"assets": [
"src/favicon.ico",
{
"glob": "**/*",
"input": "src/assets/",
"ignore": ["**/*.scss"],
"output": "/assets/"
},
...
]
在我的例子中，它是 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);
我也遇到了这个问题。 ng serve 似乎有一些变化。现在生产版本是默认配置。
您必须在 build 和 serve 节点上添加 development 选项 angular.json
// >> 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"
},
将我的 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"
}
我遇到了同样的问题。您应该将 'assets/.../variables.scss' 的导入更改为“./assets/.../variables.scss”。在我的例子中，它在 styles.scss 中，但它可以在每个 .scss 文件中。
尝试在 tsconfig.json 文件中禁用 Ivy 引擎：
In case if you are using some outdated package which is not compatible with Ivy.
"angularCompilerOptions": {"enableIvy": false}
或者，让我们通过 运行 一条一条地执行以下命令来尝试一下：
In case if you are upgrading Angular 6 to Angular 12 directly then there might be some issues.
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
我遇到了同样的问题，我发现在我的案例中 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 来处理。
解决方案是从此资产中删除任何未处理的样式表，并将它们保留在 angular.json 上的 styles 配置下。这对我有用，希望对你也有帮助！
在我看来，问题出在与 single-spa-angular 体系结构相关的 配置文件 上，尽管错误只是说：
I'm trying to minify Sass css files in your project but the syntax is unknown! Perhaps I don't know anything about the syntax of Sass files!
由于我们无法重现该问题，而且很难在具有多个配置文件的 SPA 平台中找到警告的来源，但是，有一个 直接的方法 立即在您自己的机器上找到问题或重现该项目，该项目正在与为 Angular 12 制作的 single-spa-angular repository 进行比较或分叉。从 Angular 6 迁移到 12 有一些陷阱本身，但是您还试图使此类库具有隐藏的行为。
如前所述...插件需要 CSS 而不是 SCSS 作为输入： https://webpack.js.org/plugins/mini-css-extract-plugin/
angular.json 会很相关...
在我的 package.json node-sass 中丢失了。
所以在安装最新版本的节点后-sass
我所有 CSS 相关的错误都已解决，请尝试让我们知道。
这个解决方案应该有效！
npm install node-sass@latest
您的问题与scss文件的处理有关。这个问题在
"assets": [
"src/favicon.ico",
{
"glob": "**/*",
"input": "src/assets/",
"ignore": ["**/*.scss"],
"output": "/assets/"
},
...
]
在我的例子中，它是 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);
我也遇到了这个问题。 ng serve 似乎有一些变化。现在生产版本是默认配置。
您必须在 build 和 serve 节点上添加 development 选项 angular.json
// >> 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"
},