您尝试使用标准CSS解析器解析SCSS；在Angular12更新后使用postcss-scss解析器重试

html5 • • 问答

从 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 为其提供服务。

回答

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

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

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

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

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

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

  • This worked for me, no need to turn off optimization or minify as suggested in other answers.

回答

对于那些在更新到 Angular 12 后发现这一点的人，请务必仔细阅读Angular 12 更新指南。

相关部分是：

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

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

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

相反，你可以改变inlineCritical到false你可以通过设置这样的事情做。查看完整配置进行优化。

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

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

回答

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

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

在 angular.json 中，更改

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

到

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

以上是您尝试使用标准CSS解析器解析SCSS；在Angular12更新后使用postcss-scss解析器重试的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>