是否可以使用 angular-cli 構建單獨的 CSS 文件？

Question

默認情況下，所有內容都捆綁在：

• inline.bundle.js
• polyfills.bundle.js
• 樣式.bundle.js
• 供應商.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文件或任何它決定命名的文件。

INSTEAD你可以使用 這里定義的對象符號

"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 正確指出的那樣，您可以使用標志--extract-css 。 不幸的是，此標志無法與 Angular 6+ 的ng-serve一起使用。

如果你想在ng build和ng-serve中提取 css，你可以在下面的部分architect -> build -> options中編輯angular.json文件添加新選項"extractCss": true

Answer 3

您可以使用ng build的--extract-css標志來執行此操作。 這是--prod模式下的默認值。 更多細節在這里： https ://github.com/angular/angular-cli/wiki/build