Angular 6项目中使用~导入node_modules内Bootstrap Less文件失败求助

我之前也碰到过一模一样的问题，Angular CLI对Less的路径解析逻辑和SCSS不太一样，默认不会把~自动映射到node_modules目录，得做一点小配置就能搞定。

方法一：配置stylePreprocessorOptions（推荐） #

这是最稳妥且一劳永逸的方式，通过Angular CLI的配置让Less明确知道第三方库的文件位置：

1. 打开项目根目录下的angular.json文件
2. 找到projects -> 你的项目名称 -> architect -> build -> options节点
3. 添加stylePreprocessorOptions配置，把Bootstrap Less文件的目录加入includePaths：

"options": {
  // 保留你原本已有的配置...
  "stylePreprocessorOptions": {
    "includePaths": [
      "./node_modules/bootstrap/less"
    ]
  }
}

4. 如果你需要测试环境也生效，记得在architect -> test -> options里也加上这段配置

配置完成后，你可以在bootstrap.less里简化导入语句：

@import "mixins.less";

Less会自动去你配置的includePaths目录下查找文件，不用再写~或者冗长的相对路径了。

方法二：使用相对路径导入（临时应急） #

如果暂时不想修改配置，也可以用相对路径直接从node_modules导入，不过这种方式容易因为目录结构变动而报错：

@import "../../../../node_modules/bootstrap/less/mixins.less";

计算好从src/app/styles到node_modules的层级即可，但还是推荐第一种方法更省心。

额外检查项 #

• 确认你安装的是Bootstrap 3的Less版本，执行npm list bootstrap查看版本，同时确保node_modules/bootstrap/less/mixins.less文件确实存在
• 配置修改后重启ng serve，CLI需要重新读取配置才能生效

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