为什么我的 CSS 文件在 prod 模式下被 Angular CLI 忽略? [英] Why are my CSS files ignored with Angular CLI when in prod mode?

问题描述

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

 "样式": ["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"，它仍然可以在我的 localhost/dev 环境中工作.但是ng build --prod"没有.

有什么想法可以从哪里开始吗?

解决方案

你遇到这个问题是因为捆绑css文件的顺序，现在唯一可能的解决方案是只让style.css文件这样:

>

 "样式": [样式.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

I have what I think is a standard .angular-cli.json file. In apps[0] it has:

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

The above works fine with an "ng build" or an "ng serve". However, if I do an "ng build --prod" these two css files are ignored. The way I am getting around this is by using a CDN version of bootstrap.min.css and adding styles.css to a publicly available resource (Azure blog storage) and then referencing them from index.html.

FWIW, if I do an "ng serve --prod" it still works in my localhost/dev environment. But "ng build --prod" does not.

Any ideas where to start?

解决方案

you have this problem because of the order of css file when bundling them, the only possible solution now is to let only style.css file like this:

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

and import bootstrap.min.css inside your style.css

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

that willmake your app work in local and prod, the alternative solution is build with --extract-css=false

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

这篇关于为什么我的 CSS 文件在 prod 模式下被 Angular CLI 忽略?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！