Angular 6构建产物中styles.js的作用是什么？

我来给你解释下这个文件的作用，结合你用Sass导入Bootstrap的场景来说会更清楚：

首先，styles.js是Angular CLI在构建你的Sass项目时，把全局样式文件（比如你手里的style.scss）处理后生成的脚本文件。它的核心作用是在应用加载时，动态把编译好的CSS样式注入到页面中。

为什么不直接生成CSS文件呢？这和Angular默认的构建逻辑有关：

• 当你用Sass这类预处理器写样式时，CLI会先把你的.scss文件编译成标准CSS，处理你写的变量、@import引入的Bootstrap源码和自定义变量这些逻辑；
• 之后会把编译好的CSS内容打包进styles.js，而不是单独的.css文件，这样做可以借助webpack的代码分割、缓存优化等能力，让样式和应用脚本的加载流程更统一。

再结合你的场景来说：你选择在style.scss里先导入自定义变量再引入Bootstrap，这种写法能让预处理器正确解析变量依赖，保证你的自定义主题能覆盖Bootstrap的默认变量。而这个style.scss经过编译处理后，最终的样式内容就被打包进了styles.js——当你的SPA加载时，这个脚本会自动把处理好的CSS插入到页面的<style>标签里，这样你的自定义主题样式就能正常生效了。

如果之后你想生成单独的CSS文件而不是通过JS注入，也可以修改angular.json的配置：找到architect.build.options.styles数组，把你的样式配置改成类似{"input": "src/style.scss", "inject": false}，构建后会生成单独的styles.css，你再手动在index.html里引入就行，但默认的JS注入方式在SPA场景下是更常用的。

内容的提问来源于stack exchange，提问作者Whisher