是否可以使用 angular-cli 构建单独的 CSS 文件？答案

【问题标题】：Is it possible to build separate CSS file with angular-cli?是否可以使用 angular-cli 构建单独的 CSS 文件？
【发布时间】：2017-07-11 06:49:23
【问题描述】：

默认情况下，所有内容都捆绑在：

inline.bundle.js
polyfills.bundle.js
styles.bundle.js
vendor.bundle.js
main.bundle.js

是否可以有单独的 CSS 文件？

【问题讨论】：

分离基于什么样的标准..？
CSS 标准 :)
哦，你的意思是在运行时根据 styleURLs 加载 css 文件？（这听起来像是性能杀手）
不，只是将所有css资产编译成一个文件，CSS文件，而不是JS文件。
“反对角度分量模式” - 这是真的。不幸的是，我必须这样做。为了能够加载不同的样式主题

标签： angular angular-cli

【解决方案1】：

是的！在您的angular.json 文件中，常见的做法是

"styles": [
  "styles/bootstrap.scss",
  "styles/app.scss",
  "styles/whatever-else.scss"
]

所有这些都被合并到一个 dist/styles.5d56937b24df63b1d01d.css 文件或任何它决定命名的文件中。

代替你可以使用the object notation defined here

"styles": [
  {
    "input": "styles/bootstrap.scss",
    "bundleName": "bootstrap"
  },
  {
    "input": "styles/app.scss",
    "bundleName": "app"
  },
  {
    "input": "styles/whatever-else.scss",
    "bundleName": "foo-bar"
  },
]

这将生成 3 个单独的 CSS 文件：

dist/bootstrap.*.css
dist/app.*.css
dist/foo-bar.*.css

【讨论】：

太棒了?我已经多次阅读该 wiki 页面，但错过了 object format 部分！
@CBarr 有没有办法获取哈希 url？因为我不知道如何在应用程序初始化后将其包含在中的 js 中...
@CBarr ，如何在运行时在这些包之间切换？
@Mironline 我不确定这是否可行，至少不是简单的。如果可能的话，我不熟悉如何做到这一点。

【解决方案2】：

正如@Rob 正确指出的那样，您可以使用标志--extract-css。不幸的是，Angular 6+ 中的 ng-serve 无法使用此标志。

如果您想在ng build 和ng-serve 中提取css，您可以在architect -> build -> options 下方编辑angular.json 文件添加新选项"extractCss": true

【讨论】：

自版本 11 extractCss 已弃用

【解决方案3】：

您可以使用ng build 的--extract-css 标志来执行此操作。这是--prod 模式下的默认设置。更多细节在这里：https://github.com/angular/angular-cli/wiki/build

【讨论】：

--extract-css IS 自 11.0 版起已弃用。不再需要为 HMR 禁用 CSS 提取。