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

Question

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

• 内联.bundle.js
• polyfills.bundle.js
• styles.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，您可以在下面的部分编辑

angular.json

文件

architect -> build -> options

添加新选项

"extractCss": true

Answer 3

您可以使用

--extract-css

的

ng build

标志来执行此操作。这是

--prod

模式下的默认设置。更多详细信息请参见：https://github.com/angular/angular-cli/wiki/build

Answer 4

只需向 angular.json 添加配置即可：

“configurations": {
...
    “dev-with-css": {
        “optimization": false,
        “extractLicenses": false,
        “sourceMap": true,
        “outputHashing": ‘none’,
        “budgets": []
    }
}

然后运行：

ng serve --configuration dev-with-css