如何配置 Angular 2 以将全局样式内联/注入(inject)到 <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 直接内联/注入(inject)到 <head> 中.
编辑:注意我仍然想维护一个单独的样式文件(所以我可以选择使用 SASS)。
最佳答案
在修改了一些构建配置之后，通过执行以下操作设法解决此问题:
- 在
angular.json的生产构建配置中将extractCss值设置为false
或，只需运行以下命令:
ng config "projects.site.architect.build.configurations.production.extractCss" false
然后使用生产标志服务
ng s --prod
我只使用以下文件对此进行了测试:src/app/styles.css，所以不确定这是否会将所有样式输出为内联...
但是根据 OP，这些全局样式是内联的
关于css - 制作 Angular 内联全局样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49435179/