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

时间:2017-02-21 15:01:48

标签: angular angular-cli

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

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

是否可以使用单独的 CSS文件

3 个答案:

答案 0 :(得分:7)

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

如果您想同时在ng buildng-serve中提取CSS,则可以在angular.json下的architect -> build -> options文件中添加新选项"extractCss": true

答案 1 :(得分:6)

您可以使用--extract-css的{​​{1}}标记执行此操作。这是ng build模式下的默认设置。更多详情:https://github.com/angular/angular-cli/wiki/build

答案 2 :(得分:0)

是的!在您的angular.json文件中,常见的事情是

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

并将所有内容合并到一个dist/styles.5d56937b24df63b1d01d.css文件或任何决定为其命名的文件中。

INSTEAD ,您可以使用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