Laravel Vue2项目执行npm run prod时Sass变量未定义错误修复求助

报错信息 #

执行npm run prod时出现以下错误：

ERROR in ./resources/src/assets/styles/sass/globals/_globals.scss
Module build failed (from ./node_modules/laravel-mix/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$gradient-colors".
        on line 1 of resources/src/assets/styles/sass/globals/_palette.scss
        from line 5 of C:\xampp\htdocs\sas\resources\src\assets\styles\sass\globals\_globals.scss
>> @each $gcolor_name, $gcolor in $gradient-colors {

问题分析 #

_palette.scss文件中使用$gradient-colors变量做循环遍历，但这个变量未被定义，或者定义了但没有被正确导入到当前文件。从代码逻辑来看，$gradient-colors应该是一个包含渐变配色的Sass map结构，每个子项需包含start-color和end-color两个属性。

修复步骤 #

• 步骤1：定义或定位$gradient-colors变量
  如果项目中没有这个变量，直接在_palette.scss顶部或专门的变量配置文件（比如_variables.scss）中定义：

  // 示例配置，可根据项目需求调整配色值
  $gradient-colors: (
    primary: (
      start-color: #4e73df,
      end-color: #224abe
    ),
    success: (
      start-color: #1cc88a,
      end-color: #13855c
    ),
    warning: (
      start-color: #f6c23e,
      end-color: #dda20a
    )
  );
  

  如果项目中已有该变量，全局搜索文件名找到它的定义位置。

• 步骤2：确保变量被正确导入

  • 若变量在其他文件中，在_palette.scss最顶部导入该文件，注意路径要匹配实际文件位置：

    @import './variables'; // 假设变量在同目录下的_variables.scss中
    

  • 或者检查_globals.scss的导入顺序，必须保证定义$gradient-colors的文件在导入_palette.scss之前，因为Sass是按顺序解析变量的。

• 步骤3：验证修复效果
  重新执行npm run prod，若错误消失则修复完成。如果仍报错，检查：

  • 导入路径是否正确（相对/绝对路径是否匹配文件位置）
  • $gradient-colors的map语法是否正确（括号、逗号是否闭合）

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