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

Question

默认情况下,所有内容都捆绑在:

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

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

Answer 1

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

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

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

相反，您可以使用此处定义的对象表示法

"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

Answer 2

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

如果要在两者中都提取css，ng build并且ng-serve可以angular.json在以下部分中编辑文件，请architect -> build -> options添加新选项"extractCss": true

Answer 3

你可以用--extract-css标志来做到这一点ng build.这是--prod模式中的默认值.更多细节:https://github.com/angular/angular-cli/wiki/build