使用Webpack将Less编译为CSS时遇到错误求助

这个报错我太熟了——Webpack 现在完全不知道该怎么处理你的 Less 文件里的 @ 语法，说白了就是你没给它配好处理 Less 的 Loader 链。下面给你一步步拆解问题和解决方法：

问题根源 #

Webpack 本身只能理解 JavaScript 和 JSON 文件，对于 Less 这种预编译 CSS 格式，必须通过对应的 Loader 把它转成 Webpack 能处理的 CSS，再进一步处理。你看到的 Unexpected character '@' 错误，就是因为 Webpack 直接去解析 Less 文件里的变量和导入语法，完全摸不着头脑。

解决步骤 #

1. 安装必需的依赖包 #

首先得把处理 Less 所需的几个 Loader 和 Less 本身装上，在项目根目录执行命令：

npm install less less-loader css-loader style-loader --save-dev
# 如果你用 yarn 的话
yarn add less less-loader css-loader style-loader --dev

• less：Less 编译器本身，负责把 Less 代码转成 CSS
• less-loader：让 Webpack 调用 Less 编译器
• css-loader：解析 CSS 里的 @import 和 url() 等语法
• style-loader：把编译后的 CSS 注入到 HTML 的 <style> 标签里

2. 配置 Webpack 的 Loader 规则 #

打开你的 webpack.config.js，在 module.rules 里添加处理 .less 文件的规则：

module.exports = {
  // 你的其他配置（比如 entry、output 等）...
  module: {
    rules: [
      // 新增这一条 Less 处理规则
      {
        test: /\.less$/, // 匹配所有 .less 文件
        use: [
          'style-loader', // 顺序很重要：从右往左执行，最后一步注入到DOM
          'css-loader',   // 第二步处理 CSS 语法
          'less-loader'   // 第一步把 Less 编译成 CSS
        ]
      }
    ]
  }
};

⚠️ 注意：Loader 的顺序不能搞反，Webpack 是从数组的最后一项开始执行的，所以 less-loader 要放在最右边，先完成 Less 到 CSS 的转换。

3. 额外检查：确保 Bootstrap 依赖正确 #

你的 Less 代码里用了 ~bootstrap3 路径，要确认你已经安装了 bootstrap3 包：

npm install bootstrap3 --save
# 或者 yarn add bootstrap3

~ 符号是让 Webpack 从 node_modules 目录里查找对应的包，所以必须先把 bootstrap3 装到项目里。

验证 #

配置完成后，重启你的 Webpack 开发服务器（或者重新执行编译命令），这个 Unexpected character '@' 的错误应该就消失了。

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