您尝试使用标准 CSS 解析器解析 SCSS；在 Angular 12 更新后再次尝试使用 postcss-scss 解析器

Question

从 Angular 11 更新到 12 后，ng serve 现在抛出错误：

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/_colors.scss:1:4: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/custom-bootstrap.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/global.scss:296:12: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/mdsl-composer/mdsl-composer-variables.scss:103:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

有问题的 SCSS 文件的

None 正在做一些特别的事情。 _colors.scss 例如：

// Bootstrap Overrides
$text-secondary: #2E93B1;
$text-muted: #ccc;
$link-color: #2E93B1;

.text-secondary {
  color: $text-secondary !important;
}

// LabCorp UI Overrides
$theme-colors: (
  'primary': #003A70,
  'secondary': #2E93B1,
  'success': #155724,
  'danger': #790E1D,
  'warning': #C59C38,
  'info': #007A6E,
  'light': #EDF1F4,
  'dark': #0B1519,
);

// UI design colors
$primary: #007FA3;
$highlighted: #D57800;
$accent: #5F456F;
$accent-secondary: #808080;
$related: #D1EAF1;

所以我不确定 Unknown word 解析器在抱怨什么。

我没有在网上找到关于 Angular 这个错误的很多信息。

项目代码的其余部分将按预期进行编译，但现在应用程序不会运行。我不确定这里要提供什么其他代码，但我非常乐意 post 任何对调试有帮助的代码。

该错误特定于 Angular CLI。我们的项目使用 Angular Universal，构建代码并按预期通过 Node 提供服务。

Answer 1

我使用 Angular CLI 12.0.0 创建了一个新项目，然后复制了 angular.json 中缺失或与我的项目不同的部分。

在此应用程序中，它是：

"projects": {
  "schematics": {
    "@schematics/angular:application": {
      "strict": true
    }
  },
  ...,
  "architect": {
    "build": {
      "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "200kb",
                  "maximumError": "1024kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
    }
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "mdsl-authoring:build:production"
        },
        "development": {
          "browserTarget": "mdsl-authoring:build:development"
        }
      },
    "defaultConfiguration": "development"
  }
}

现在 ng serve 按预期工作。因此，如果您要更新，请务必检查新项目中的 angular.json 文件与您的文件之间的差异。

Answer 2

我也在为同样的问题苦苦挣扎。我需要先添加这个：

npm --save install postcss-scss

https://www.npmjs.com/package/postcss-scss

并创建

postcss.config.js

项目根目录下的文件。

添加

module.exports = {
    syntax: 'postcss-scss',
};

最重要的是不要忘记做

npm audit fix --force

现在您可以 ng build 或 ng serve

这应该可以修复当前的 angular 12 错误。

Answer 3

我和你有同样的问题，但我无法用你的例子解决它。

当我将@angular-devkit/build-angular 包从版本“^ 0.1000.2”更新到“^12.0.2”时会发生这种情况

assets/scss/fix.scss - Error: assets/scss/fix.scss from Css Minimizer
D:\home\admin-pref-new\assets\scss\fix.scss:169:6: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser [assets/scss/fix.s
css:169,6]
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

对 scss 文件的评论

// ng-select para manter a mesma cor do boostrap
.ng-select {
  &.ng-select-disabled {
    > .ng-select-container {
      background-color: #E3E3E3 !important;
    }
  }
}

Answer 4

对于那些在更新到 Angular 12 后立即发现此问题的人，请务必仔细阅读 Angular 12 Update Guide。

相关部分是：

Critical CSS inlining is now enabled by default. To turn this off, set inlineCritical to false. See PR #20096 and the Style preprocessor options section of Angular workspace configuration.

它所做的实际上是查看您的 index.html 文件并检查样式表条目，然后尝试将它们包含在源代码中。

正如其他一些人所说的那样，设置 optimization: false 可以解决问题 - 但我猜你并没有对你的包大小有任何好处！

相反，您可以将 inlineCritical 更改为 false，您可以通过这样的设置来完成。查看完整的 configuration for optimization.

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
}

Angular 12 中的另一个可能相关的变化是 inlineStyleLanguage 选项。

Answer 5

自从我最近将一个中型项目从 v11 迁移到 v12后，我就调查了这个问题。

问题是您的 .scss 文件位于 assets 文件夹中，这基本上是为了按原样复制资产。不会由某种 scss 预处理器处理。

来源https://angular.io/guide/workspace-config#asset-config

... folders you want to copy as-is when building your project.

但是，资产文件夹中的文件正在缩小，这就是异常的来源。在以前的版本中，这些文件可能已经过预处理，这就是为什么这个问题直到现在才出现的原因。

解决方案是将全局 .scss 文件移出资产文件夹。如果需要，您可以在 angular.json (styles property) 中另外列出它们。

Answer 6

我遇到了同样的错误，我的解决方案是更改文件 angular.json，特别是 projects -> "angular_name" -> architect -> configurations -> production -> optimization 部分。最初优化的值是 optimization:true 所以我将优化部分更改为：

         "optimization": {
            "scripts": true,
            "styles": {
              "minify": false,
              "inlineCritical": true
            },
            "fonts": true
          },

如您所见，选项 minify 已设置为 false，更改此选项后一切开始正常工作

查看此 link 了解有关 optimization https://angular.io/guide/workspace-config#optimization-configuration

的更多详细信息

Answer 7

确保 `/assets`

中没有 sass 个文件

我的主要 styles.scss 文件引用了其他文件...

@use '~@angular/material' as mat;
@import 'assets/preload/preload';    // this is preload.scss

如您所见，其中一个文件位于 assets 中。这是因为它最初是由 index.html 文件直接包含的（为了速度）。有了这个使用 critters 的漂亮的新内联功能，我希望它使用默认优化设置进行内联。

SASS官方支持commenting包括//两种常见样式。然而，常规 css（和标准 css 解析器）不会。

我的 preload.scss 文件恰好包含一些 // 风格的注释。使用 @import 在 styles.scss 中导入时，这绝对没问题，因为所有内容都通过 sass 编译器处理，并且 // 注释很好。

但是（我不确定具体原因）postcss-scss 解析器正在 /assets 内部查找 scss 文件。它发现无效的注释样式并爆炸。我认为只有 ng serve 可以做到这一点。

我的解决方案是将 preload.scss 文件移动到与其他文件相同的位置。希望如果您遇到同样的问题，修复方法也是一样的。

其他观察/推测：

ng serve 加载并处理资产中的每个文件（如果启用详细模式，您可以看到它这样做）。我不确定 *what 它正在做什么 tbh 但它处于失败的那个阶段。即使它没有被任何东西引用，它也会这样做。
如果我运行制作它不会失败，因为它只是复制资产而不处理它们。
如果我禁用 optimization/minify，那么 ng serve 也会成功。只有在缩小时 post-css 是运行.
我认为这是一个错误，但我不完全确定。像这样处理资产文件没有意义，而且可能需要时间。

Answer 8

正如你所说，问题是在 assets 文件夹中有 sass / scss 文件。

无需将这些文件移出资产文件夹，您可以忽略它们。

在angular.json中，更改

"assets": [
    "src/favicon.ico",
    "src/assets",
    ...
]

至

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

Answer 9

将有问题的样式目录移动到 stylePreprocessorOptions 的 includePaths 对我有用。

"stylePreprocessorOptions": {
    "includePaths": [
        "src/assets"
    ]
},

Answer 10

有同样的问题。我是如何解决这个问题的，方法是将旧 Scss 的语法错误修复到新 Scss。

这需要一些时间，但最终，一切都是值得的。

（我有 2017 年的代码需要在 Angular 12 中使用）

Answer 11

Angular 12

在 "fileReplacements" 上面添加这些代码 foreach environment configuration in angular.json

"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,

示例：

"configurations": {
    "staging": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true,
        "fileReplacements": [{
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.testing.ts"
        }]
    },
    "testing": {},
    "local": {}
}

Answer 12

从我的角度来说，这是因为我的 scss 代码有误。例如，变量设置不正确。

Answer 13

如果有人遇到相同的错误但与资产文件夹中的 angular12 或 scss 文件无关，则可能是因为您的 scss 文件中有错误。

错误可能是：

正在导入另一个不存在的文件
语法错误
使用未声明的变量或混合

您尝试使用标准 CSS 解析器解析 SCSS；在 Angular 12 更新后再次尝试使用 postcss-scss 解析器

You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after Angular 12 update

angular

angular-cli

确保 `/assets`

其他观察/推测：

您尝试使用标准 CSS 解析器解析 SCSS；在 Angular 12 更新后再次尝试使用 postcss-scss 解析器

You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after Angular 12 update

angular

angular-cli

确保 /assets

其他观察/推测：

确保 `/assets`