您尝试使用标准 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 文件都没有做任何特别的事情。 _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 错误的信息。

项目代码的其余部分将按预期编译，但现在应用程序将无法运行。我不确定在这里提供什么其他代码，但我很乐意发布任何有助于调试的代码。

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

Answer 1

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

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

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

...在构建项目时要按原样复制的文件夹。

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

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

Answer 2

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

相关部分是：

现在默认启用关键的 CSS 内联。要关闭此功能，请设置 inlineCritical 为 false。请参阅 PR #20096 和样式预处理器 Angular 工作空间配置的选项部分。

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

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

相反，您可以将inlineCritical 更改为false，您可以通过设置类似的内容来实现。查看完整的configuration for optimization。

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

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

Answer 3

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

您可以忽略它们，而不是将这些文件移出资产文件夹。

在angular.json中，改变

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

到

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

Answer 4

我使用 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 5

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

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

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

查看此链接以获取有关optimization https://angular.io/guide/workspace-config#optimization-configuration 的更多详细信息

Answer 6

确保/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 文件恰好包含一些// 样式的cmets。这在 styles.scss 和 @import 中导入时绝对没问题，因为一切都通过 sass 编译器处理，// cmets 没问题。

但是（我不确定为什么）postcss-scss 解析器正在 /assets 内部查找 scss 文件。它发现无效的评论样式并炸毁。我认为只有 ng serve 才能做到这一点。

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

---

其他观察/推测：

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

Answer 7

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

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 8

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

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

Answer 9

遇到了同样的问题。我设法解决它的方法是将旧 Scss 的语法错误修复到新 Scss。

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

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

Answer 10

Angular 12

在angular.json

中的"fileReplacements" foreach 环境配置上面添加这些代码

"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 11

就我而言，这是因为我的 scss 代码错误。例如，不正确的变量设置。

Answer 12

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

当我将 @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 文件上的 cmets

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