Angular CLI应用导入bootstrap.css报模块解析失败的解决方法

这个报错的本质是构建链将CSS文件当做JS/TS模块解析，碰到:root这类CSS专属语法时无法识别抛出错误，和Bootstrap版本、缺少CSS loader没有直接关系。Angular CLI 内置了完整的CSS处理能力，不需要额外手动修改webpack配置添加CSS loader，之前的操作踩了两个核心误区：

• 重复引入且引入方式错误：同时在angular.json的styles配置和组件TS代码中用import语句引入Bootstrap CSS。TS代码里的import默认会被当做ECMAScript模块依赖解析，不会自动走内置的CSS处理流程，自然会抛出语法错误。
• 额外接入custom-webpack自定义配置：这类自定义builder的配置很容易和Angular CLI内置的webpack规则冲突，反而干扰正常的CSS解析。

正确操作步骤 #

全局引入Bootstrap（官方推荐，适合绝大多数场景） #

• 清理错误引入：把所有组件TS文件中写的import 'bootstrap.css'、import 'bootstrap/dist/css/bootstrap.min.css'这类直接引入CSS的语句全部删除，这是触发报错的直接诱因。
• 确认依赖安装：在项目根目录执行安装命令，确保依赖存放在本地node_modules中：
  npm install bootstrap --save
• 调整angular.json配置：只在构建、测试节点的styles数组中配置Bootstrap的全局路径，不要在业务代码中重复引入。找到对应项目的build.options.styles和test.options.styles数组，填入准确的依赖路径，参考配置：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

注意路径不需要加旧版webpack要求的~前缀，直接写node_modules开头的相对路径即可。

• 重启构建进程：完全终止当前运行的ng serve、ng test进程，重新执行启动命令。Angular CLI的styles配置修改不会触发热更新，必须重启才能加载新的配置项。

组件级引入Bootstrap（非特殊需求不推荐，会造成样式重复打包） #

如果确实需要在单个组件内引入Bootstrap样式，不要在TS文件中用import语句引入，要在组件装饰器的styleUrls数组中声明路径，注意这种方式引入的样式会受Angular视图封装规则限制，默认只作用于当前组件：

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  // 注意如果已经全局引入了，这里不要重复配置
  styleUrls: ['../../node_modules/bootstrap/dist/css/bootstrap.min.css', './demo.component.css']
})

额外排查点 #

• 如果你之前为了解决问题接入了@angular-builders/custom-webpack，先把angular.json里的builder改回官方默认值：构建节点用@angular-devkit/build-angular:browser，测试节点用@angular-devkit/build-angular:karma，避免自定义配置覆盖内置的CSS解析规则。
• 如果项目初始化时选择的CSS预处理器不是SCSS，不要直接引入Bootstrap目录下的.scss源文件，直接引入编译好的.min.css文件即可。
• 检查全局安装的Angular CLI版本和本地项目的Angular版本是否一致，版本差过大也可能导致样式解析规则异常，可以执行ng version核对版本号。

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