在angular项目中，通过 angular.json 配置全局 css 引入的最直接方法是在项目的架构配置中找到 architect.build.options.styles 数组，并将 css 文件的路径添加进去。这样配置后，构建工具（webpack 或 vite）会在应用启动时自动加载这些样式，使其在全局生效。如果路径正确且没有命名冲突，所有组件都能直接使用这些样式。
如何指定特定 CSS 文件的加载顺序？
在 styles 数组中定义的 CSS 文件会按照数组索引的顺序依次加载。这意味着排在后面的样式表可以覆盖前面样式表中定义的相同选择器。例如，如果你希望自定义的变量或重置样式优先于第三方库的样式，只需将自定义文件放在数组的前面即可。这种顺序依赖是 Angular CLI 默认的行为，无需额外配置。
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css",
"src/custom-theme.css"
]
}
}
}
}
}
}
上述代码展示了如何在 angular.json 中添加两个全局样式文件。当运行 ng build 时，styles.css 会先被编译并注入，随后 custom-theme.css 会被注入。如果两个文件中都定义了 .button 类，那么 custom-theme.css 中的定义将生效，因为它在加载顺序上更靠后。
如何处理 SCSS 预处理器与全局样式的结合？
Angular 项目通常使用 SCSS 作为默认的样式预处理器。在 angular.json 中配置全局 SCSS 文件的方式与 CSS 完全一致，只需确保文件扩展名为 .scss 即可。此外，如果项目中使用了全局变量或 Mixin，将它们放在全局样式文件中可以方便地在任何组件的样式中通过 @use 或 @import 引用。需要注意的是，全局 SCSS 文件中的样式同样遵循数组顺序，且会被编译为最终的 CSS 输出到 bundle 中。
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/styles"
]
}
}
}
}
}
}
}
这段代码演示了如何配置全局 SCSS 文件以及设置预处理器路径。通过 stylePreprocessorOptions.includePaths，你可以指定额外的目录，使得在 styles.scss 或其他组件样式中引用局部样式文件时无需写相对路径。例如，可以在 src/assets/styles/_variables.scss 中定义变量，然后在 styles.scss 中直接通过 @use 'variables'; 引入，从而保持全局样式的模块化和可维护性。
基于 angular.json 中 styles 数组的具体问题：移除未使用的样式
如果在 angular.json 中引入了大量全局 CSS 或 SCSS 文件，但实际应用中只使用了一部分，会导致打包体积增大。要解决这个问题，可以利用 Angular 的 Tree Shaking 机制，但前提是样式文件中的选择器必须与模板中的类名严格匹配。如果使用了动态类名或第三方库的全局样式，Tree Shaking 可能无法完全移除未使用的代码。此时，建议将全局样式拆分为按需加载的模块，或者使用 PostCSS 插件进行进一步的优化。对于大多数场景，确保 styles 数组中只包含真正需要全局生效的文件是最有效的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
