angular-cli - 为什么我的 CSS 文件在 prod 模式下被 Angular CLI 忽略？

Question

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

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

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

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

任何想法从哪里开始？

Answer 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