Angular 6 构建中的 style.js 是什么

Question

偷看html源码

我使用 sass 使用 ng 6 构建 SPA

我找到了这些文件列表

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

我想知道 style.js 的用途是什么？

我正在导入 Bootstrap

在我的 style.scss 中，就像

(我这样做是因为如果我把angular.json 中的 bootstrap 我不能我的自定义主题请参阅变量)

@import "./assets/variables";
@import "~bootstrap/scss/bootstrap";

Answer 1

在开发构建中，全局样式被提取到 .js 文件，而在生产构建中，它们被提取到 .css 文件。要更改此默认行为，请使用 --extract-css 选项或其别名 -ec 和 ng build 命令。

开发版本中使用js提取css的原因是什么？

我们希望在 bundle webpack 中使用的每个文件/模块都希望是有效的 JavaScript 模块。当然，styles.css 不是一个有效的 JavaScript 模块。所以我们需要一些东西来把这个 CSS 模块变成 JS 模块。这就是加载器发挥作用的地方。以下是 webpack 文档中关于加载器的介绍:

加载器是应用于模块源代码的转换。它们允许您在导入或“加载”文件时对其进行预处理...加载器可以将文件从不同的语言(如 TypeScript)转换为 JavaScript，或将内联图像转换为数据 URL。

更多: This is how angular-cli/webpack delivers your CSS styles to the client