Angular中styleUrls如何动态引入目录下所有样式文件避免硬编码

Angular 原生的styleUrls配置不支持直接传入目录路径批量加载样式，要实现自动引入./styles/目录下所有样式文件的效果，可根据项目技术选型选以下方案：

方案1：用样式预处理器的通配符导入（最推荐，无额外依赖） #

这是成本最低、和Angular样式封装机制兼容最好的方案，Angular CLI默认支持SCSS、LESS等预处理器：

• 如果当前项目用原生CSS，先执行命令把默认样式格式切换为SCSS，已有CSS文件直接改后缀即可正常运行，无兼容问题：

  ng config schematics.@schematics/angular:component.style scss
  

• 在./styles/目录下新建汇总文件_index.scss（文件名前加下划线是SCSS的约定，代表这是局部文件，不会被单独编译为独立样式文件）
• 在汇总文件里用通配符引入当前目录下所有样式文件：

  // 引入当前目录下所有scss文件，需要包含子目录的话把通配符改成"./**/*.scss"即可
  @use "./*.scss";
  // 低版本SCSS不支持@use的话可以替换为旧语法：@import "./*.scss";
  

  如果用LESS预处理器，写法一致：

  @import "./*.less";
  

• 最后在组件的styleUrls里只引入这一个汇总文件即可，后续往./styles/目录新增样式文件时不需要修改任何组件配置，会被自动加载：

  styleUrls: ['./styles/index.scss']
  

方案2：借助webpack的require.context批量引入（适合原生CSS场景） #

Angular CLI底层基于webpack构建，可以用webpack内置的require.context能力自动扫描目录下的样式文件完成引入：

注意：该方式引入的样式不会经过Angular的视图封装处理，默认是全局生效的，需要做组件级样式隔离时不推荐使用。

直接在组件类的构造函数里加入以下代码即可：

constructor() {
  // 参数依次为：要扫描的目录路径、是否遍历子目录、匹配样式文件的正则规则
  const allStyles = (require as any).context('./styles/', true, /\.css$/);
  allStyles.keys().forEach(allStyles);
}

方案3：自定义构建脚本生成路径列表 #

如果以上方案都不符合需求，也可以写一个简单的Node脚本，在项目启动、构建前自动扫描./styles/目录下的所有样式文件，生成路径列表写入对应的组件配置文件中，不过这种方案维护成本较高，一般不推荐使用。

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