Webpack配置less-loader后无法解析.less文件的问题求助

看起来你遇到的核心问题是Webpack没有正确识别并处理Less文件，导致出现了Module parse failed的错误。这大概率是因为缺少必要的依赖包或者loader配置不完整，我来一步步帮你排查解决：

第一步：补全必需的依赖包 #

less-loader只是负责把Less语法编译成CSS，但它还需要几个配套工具才能正常工作：

• less：Less语法的编译器本身
• css-loader：处理CSS中的@import和url()等语法
• style-loader：把编译后的CSS注入到页面的<style>标签中

你只安装了less-loader，所以先执行以下命令补全依赖：

npm install less css-loader style-loader --save-dev

第二步：修正Webpack配置文件 #

确保你的webpack.config.js中，module.rules里正确配置了Less文件的处理规则，注意loader的顺序是从右到左执行（先由less-loader编译Less，再由css-loader处理CSS，最后由style-loader注入DOM）：

module.exports = {
  // 你的其他配置（entry、output等）
  module: {
    rules: [
      // 可以保留你已有的其他规则（比如JS的babel-loader）
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

第三步：优化Less文件写法（可选） #

你的Less文件把@import嵌套在#entry选择器里是可以正常工作的，但如果是想全局引入bootstrap.css，直接写在最外层会更清晰：

@import (less) './css/bootstrap.css';

#entry {
  // 你的自定义Less样式
}

最后验证 #

重新运行Webpack打包命令，应该就能正常处理Less文件了。如果还是报错，可以检查：

• webpack.config.js的文件路径是否正确，确保Webpack能读取到这个配置
• 入口文件中Less的引入路径是否正确（相对路径要和文件实际位置对应）

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