Question

如何配置Angular 2内联/注入全局样式到<style>中的<head>标记？

运行ng new site然后ng serve --prod会在<link href="styles.x.bundle.css" rel="stylesheet"/>中提供带有<head>标记的网页。没有内联。

如果我使用ng serve --prod --extract-css=false，则会将样式打包到styles.x.bundle.js文件中，该文件最后通过<script>标记加载。仍然没有内联。

但我希望将CSS内联/直接注入<head>。

编辑：注意我仍然想要维护一个单独的样式文件（所以我可以选择使用SASS）。

Answer 1

After tinkering with some of the build configs, manage to resolve this by doing the following:

set the extractCss value to false within your production build config in angular.json

OR, just run the command below:

ng config "projects.site.architect.build.configurations.production.extractCss" false

Then serve using the production flag

ng s --prod

I have only tested this with the following file: src/app/styles.css, so not sure if this would output ALL styles as inline...

But as per OP, these global styles are inlined