Webpack集成Bootstrap与less-loader路径解析异常排查

首先看你遇到的报错和配置，核心有两个问题导致了这个情况，咱们一步步来解决：

1. 你安装的Bootstrap 4没有Less文件 #

Bootstrap从4.x版本开始就彻底切换到Sass作为预处理器了，你npm装的bootstrap@4.3.1包里根本没有less文件夹，这就是为什么报错找不到bootstrap/less/bootstrap.less的根本原因之一。

如果你坚持要用Less版本的Bootstrap，有两个选择：

• 安装Bootstrap 3.x（官方支持Less）：
  执行命令安装兼容Less的版本：

  npm install bootstrap@3 --save
  

  之后你的@import "~bootstrap/less/bootstrap";路径就完全正确了，因为Bootstrap 3的npm包确实包含这个文件。
• 使用第三方维护的Bootstrap 4 Less版本：
  安装社区维护的bootstrap-less包：

  npm install bootstrap-less --save
  

  对应的导入路径要改成：

  @import "~bootstrap-less/bootstrap";
  

2. 完善Webpack的Less Loader配置 #

你当前的Webpack配置里，Less loader只匹配了index\.less文件——也就是说，只有入口的index.less会被loader处理，而它导入的其他Less文件（比如报错的account-dashboard-page.less）内部的@import语句无法被less-loader正确解析路径。

修改webpack.common.js里的Less规则，让它匹配所有.less文件，同时给less-loader加上路径配置，明确告诉它去node_modules找依赖：

// 替换原来的index.less规则
{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: [
      "css-loader",
      {
        loader: "less-loader",
        options: {
          paths: [path.resolve(__dirname, "node_modules")]
        }
      }
    ]
  })
}

3. 可选：显式配置Webpack的模块查找路径 #

虽然Webpack默认会去node_modules找模块，但显式配置可以避免一些路径解析的意外问题。在webpack.common.js的module.exports里添加resolve配置：

resolve: {
  modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
}

做完这些修改后，重新执行npm run build，应该就能正常解析Bootstrap的Less文件了。

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