您尝试使用标准的CSS解析器来解析SCSS；在角度12更新后再尝试使用postcss-scss解析器。

Question

从角度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。

我在网上找不到很多关于这个角度错误的信息。

其余的项目代码将按预期进行编译，但现在应用程序将无法运行。我不知道这里还提供了哪些代码，但我非常乐意发布任何有助于调试的内容。

这个误差是特定于角CLI的。我们的项目使用，并构建代码并按照预期通过Node提供服务。

Answer 1

对于那些在更新到角度12后发现这一点的人，一定要仔细阅读角度12更新指南。

有关部分是：

现在默认启用了关键CSS内联。若要关闭此选项，请将inlineCritical设置为false。参见PR #20096和角工作区配置的样式预处理器选项部分。

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

就像其他人说的，设置optimization: false可以解决这个问题--但我猜你并没有为这个问题做任何事情！

相反，您可以将inlineCritical更改为false，这可以通过设置如下内容来完成。查看完整的优化配置。

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

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

Answer 2

自从最近我将一个中等规模的项目从v11迁移到v12之后，我就一直在研究这个问题。

问题是，您的.scss文件在assets文件夹中，这基本上意味着要按原样复制资产。，而不是由某种scss预处理程序处理的。

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

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

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

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

Answer 3

正如您所说，问题在于资产文件夹中有sass / scss文件。

与其将这些文件移出“资产”文件夹，不如忽略它们.

在angular.json中，更改

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

至

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