Angular 2项目引入Bourbon报错求助：模块构建失败

开发者阿泽

2026-5-15

解决Angular 2项目中Bourbon导入报错的问题

这个问题我之前帮朋友排查过，其实根源很明确——你的Sass loader误把Bourbon的Node.js入口文件（index.js）当成了Sass源码来解析，所以才会报出“Invalid CSS”的错误。Bourbon的实际Sass样式文件并不在根目录，而是藏在assets/stylesheets子文件夹里，下面给你一步步的解决思路：

第一步：确认Bourbon安装完成
先确保你已经通过包管理器正确安装了Bourbon，执行以下命令（二选一）：
```
npm install bourbon --save-dev
# 或者用yarn
yarn add bourbon --dev
```
第二步：配置Sass的include路径（关键）
Angular项目需要明确告诉Sass loader去哪里找Bourbon的样式文件，推荐全局配置的方式：
打开项目根目录的angular.json（旧版本Angular CLI用的是.angular-cli.json），找到projects -> 你的项目名 -> architect -> build -> options，添加stylePreprocessorOptions配置：
```
"options": {
  // 其他已有的配置...
  "stylePreprocessorOptions": {
    "includePaths": [
      "./node_modules/bourbon/assets/stylesheets"
    ]
  }
}
```
这样配置后，你就能在任意Sass文件里直接导入Bourbon了：
```
@import "bourbon";
```
如果不想全局配置，也可以在单个Sass文件里写完整相对路径导入（注意根据你的文件位置调整路径）：
```
@import "../node_modules/bourbon/assets/stylesheets/bourbon";
```
第三步：重启开发服务器
配置修改后，一定要重启你的ng serve命令，不然Angular不会加载新的配置，错误还会继续出现。
第四步：验证配置是否生效
在你的styles.scss里写一段Bourbon的mixin测试，比如：
```
.transition-box {
  @include transition(all 0.3s ease-in-out);
}
```
如果项目能正常编译，没有报错，就说明配置成功了。