Angular在生产构建中CSS顺序错误。

Question

我有两个CSS文件，我将它们加载到 src/assets 中，如下所示：

我的 Angular.json 文件：

"styles": [
  "src/assets/css/base.css",
  "src/assets/css/template.css"
]

我有一个类，在两个文件中都定义了它。

在 base.css 中，我有以下内容：

.my-class {
  background: red;
}

在 template.css 中，我有以下内容：

.my-class {
  background: blue;
}

使用ng serve启动应用时，我看到了蓝色的背景（红色背景将被蓝色背景覆盖，这是真实情况）。

但当我运行ng build --prod构建项目时，它给出了错误的顺序。这意味着我看到了红色的背景。有什么想法吗？

- Saeed sdns

---

是的，我也遇到了同样的问题。正常的生产构建会搞乱CSS顺序。下面的答案有效。非常令人恼火的问题。 - Michelangelo

Answer 1

这是一个已知的（并且公开的）与angular相关的问题： https://github.com/angular/angular-cli/issues/9475 一个可能的解决方法：

ng build --prod -extract-css false

或者你可以尝试使用更精确的CSS选择器。

- chrismclarke

---

我认为比 CLI 版本更重要的是 @angular-devkit/build-angular，它组织了构建脚本，但我可能错了。 - chrismclarke

几个月前遇到了这个问题，似乎仍未解决。正常的生产构建确实会搞乱CSS表的顺序。 - Michelangelo

我也看到一些人谈论只加载一个CSS文件，并从中动态导入所有节点模块的CSS，但我自己还没有成功地使其工作。 - chrismclarke

这似乎需要更多的工作，而且说实话不值得花时间。这基本上是 CLI 如何做到的，对吧？一个大的 CSS 文件，如果它只按指定顺序执行就好了哈哈。 - Michelangelo

Answer 2

这可能不是每次都会发生，但有一个奇怪的行为是，如果你在你的css中有@import，它会在生成的css文件底部创建一个新文件，导致事情变得无序（来源https://github.com/angular/angular-cli/issues/9475#issuecomment-427225617）

问题出在你的@import上，比如你正在导入一些谷歌字体。所以Angular优先编译该样式表并在所述顺序之前加载。让我们看看这个例子：

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/css/new-age.css" ],

只需查看这个new-age.css文件：@import url('https://fonts.googleapis.com/css?family=Lato|Oswald'); html, body { width: 100%; height: 100%; background: #edf1f5; } ......

解决方案是为这些导入制作一个单独的css文件，然后在angular.json中提到它，像这样：

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/css/new-age.css", "src/assets/css/imp.css" ],

我的建议是要么完全避免使用@import（可以在index.html中使用链接标签），要么对所有样式使用@import（这样angular.json上的列表只有styles.css）。

- Leonardo Tanoue