是否可以使用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

正常指出，您可以使用标志--extract-css。不幸的是，该标志不可能从Angular 6 。

中与ng-serve一起使用。

如果要在ng build和ng-serve中提取CSS，则可以在下面的architect -> build -> options中编辑angular.json文件。11添加新选项"extractCss": true

Answer 3

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