在 prod 模式下，为什么我的 CSS 文件会被 Angular CLI 忽略？答案

【问题标题】：Why are my CSS files ignored with Angular CLI when in prod mode?在 prod 模式下，为什么我的 CSS 文件会被 Angular CLI 忽略？
【发布时间】：2018-04-11 09:33:45
【问题描述】：

我有一个我认为是标准的 .angular-cli.json 文件。在应用程序[0] 中，它具有：

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

以上内容适用于“ng build”或“ng serve”。但是，如果我执行“ng build --prod”，这两个 css 文件将被忽略。我解决这个问题的方法是使用 CDN 版本的 bootstrap.min.css 并将 styles.css 添加到公开可用的资源（Azure 博客存储），然后从 index.html 引用它们。

FWIW，如果我执行“ng serve --prod”，它仍然可以在我的 localhost/dev 环境中工作。但是“ng build --prod”没有。

任何想法从哪里开始？

【问题讨论】：

如果您使用ng build --pord，您是否在dist 文件夹中输出了样式包？
是的，我有一个“styles..bundle.css”文件，里面似乎有我想要的。
我想知道您是否 npm install -g http-server 然后将 dist 文件夹与 http-server 一起服务会产生什么结果？您还可以查看开发工具的网络选项卡中是否加载了 css 包？
我有这个确切的问题，你赢了吗？

标签： angular-cli

【解决方案1】：

由于打包时css文件的顺序，您遇到了这个问题，现在唯一可能的解决方案是只让style.css文件像这样：

 "styles": [
   "styles.css"
  ],

并在 style.css 中导入 bootstrap.min.css

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css");

这将使您的应用程序在本地和生产环境中运行，替代解决方案是使用 --extract-css=false 构建的

ng build --prod --extract-css=false

【讨论】：