Angular中stylePreprocessorOptions构建正常但服务启动异常问题

云原生阿岚

2026-6-22

Angular中stylePreprocessorOptions在serve命令下无法解析纯CSS文件的问题及解决办法

问题背景

我在开发Angular应用时，希望在多个组件间共享CSS样式，于是在组件的CSS文件中使用：

@import "mycommoncss.css";

为了避免每次都写完整相对路径（相对路径写法是可以正常工作的），我在angular.json中配置了stylePreprocessorOptions，具体配置如下：

{
  "projects": { 
    "myapp" : {
      "architect" : {
        "build" : {
          "options" : {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/common_styles"
              ]
            }
          }
        }
      }
    }
  }
}

问题现象

使用build命令构建生产包时一切正常：

node_modules/.bin/ng build --configuration production --base-href='.'

mycommoncss.css能被正确找到，样式也正常应用到组件上。但使用serve命令启动开发服务器时，却抛出了模块解析错误：

./src/app/components/club/club.component.css?ngResource - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'mycss.css' in '/home/XXX/projects/XXX/xxx-app-gui/src/app/components/club'

初步排查

Angular的预处理器指令是能被识别的，否则构建环节也无法正常完成
一度怀疑是serve命令存在bug，但考虑到这类场景应该很普遍，更可能是自己遗漏了某些配置项

已验证的解决方案

纯CSS文件无法通过stylePreprocessorOptions的配置实现无相对路径导入
改用SCSS格式的样式文件：将共享样式文件重命名为_mycommoncss.scss（添加下划线前缀），然后在组件的SCSS文件中导入时省略下划线：
```
@import "mycommoncss";
```
修改后，无论是build构建还是serve启动开发服务器都能正常工作。推测原因是纯CSS文件不会经过Angular的预处理器流程，只有Sass这类预处理器文件才会触发stylePreprocessorOptions中includePaths的路径解析逻辑，所以只有SCSS文件能生效。
目前还未明确为什么纯CSS在build时可以正常解析，但在serve时出现异常。