Angular中stylePreprocessorOptions加载assets内CSS文件失败求助

问题梳理 #

你已在angular.json中配置stylePreprocessorOptions.includePaths指向src/assets/css，但在styles.css里用@import 'icons.css';会提示文件找不到，只有写完整相对路径@import './assets/css/icons.css';才能正常运行。

解决办法 #

1. 核对文件路径与大小写 #

先确认src/assets/css目录下确实存在icons.css，注意文件名大小写——Linux/macOS环境下文件名区分大小写，要是实际文件是Icons.css，小写导入就会失败。

2. 重启Angular开发服务器 #

修改angular.json后，Angular CLI不会自动加载新配置，必须重启服务：

ng serve --stop
ng serve

3. 补全测试环境的配置 #

如果运行测试时也需要导入该文件，要在test.options里同步配置stylePreprocessorOptions：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    // 其他原有配置...
    "stylePreprocessorOptions": {
      "includePaths": ["src/assets/css"]
    }
  }
}

4. 尝试添加波浪号前缀（适配旧版Angular） #

部分旧版本Angular CLI需要在导入路径前加~来识别配置的include路径：

@import '~icons.css';

5. 改用绝对路径配置includePaths #

把配置里的路径改成绝对路径写法，避免相对路径解析偏差：

"stylePreprocessorOptions": {
  "includePaths": ["./src/assets/css"]
}

额外排查步骤 #

如果以上方法都没用，可以在任意组件的样式文件（比如app.component.css）里测试@import 'icons.css';。如果组件样式里能成功导入，说明styles.css可能存在缓存问题，删除node_modules/.cache目录后重启服务器即可。

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