Laravel Webpack编译报错：Bootstrap变量$font-weight-bolder未定义（Node.js 12）

错误原因 #

这个报错的核心是Bootstrap的_reboot.scss文件在使用$font-weight-bolder变量时，该变量还未被定义。这个变量属于Bootstrap的核心变量集合，只有在正确导入包含它的_variables.scss文件后，其他组件文件才能正常调用。

解决方案 #

• 调整SCSS导入顺序
  在你的main.scss中，必须先导入Bootstrap的变量文件，再导入其他组件（包括_reboot.scss）。示例代码：

  // 优先导入Bootstrap核心变量
  @import "~bootstrap/scss/_variables";
  // 再导入_reboot及其他Bootstrap组件
  @import "~bootstrap/scss/_reboot";
  // 后续添加自定义样式或其他Bootstrap模块
  

• 检查sass-loader配置
  确保webpack的sass-loader配置能正确解析node_modules中的Bootstrap文件，可通过includePaths指定Bootstrap SCSS目录：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['node_modules/bootstrap/scss']
              }
            }
          ]
        }
      ]
    }
  };
  

• 适配Node.js 12版本
  Node.js 12已停止维护，若你使用的是Bootstrap 5+版本，它对Node版本要求更高，建议要么降级Bootstrap到4.x系列（兼容Node.js 12），要么升级Node.js到支持的版本（如14.x及以上）。

• 清理并重装依赖
  依赖缓存可能引发异常，执行以下命令重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  

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