Vue项目全局引入sass变量文件配置未生效 问题求助

配置不生效的核心原因及对应解决方案 #

• 1. sass-loader版本与配置字段不匹配
  不同版本的sass-loader要求的注入字段完全不同，用错字段会直接导致配置失效：
  • sass-loader v7及更早：用data字段
  • sass-loader v8：用prependData字段
  • sass-loader v10及更高（目前主流版本）：用additionalData字段
    执行npm list sass-loader即可查看本地安装的版本，替换对应字段即可。
• 2. 文件引入路径和实际存放位置不匹配
  你描述是直接在assets文件夹下创建的_variables.scss，但配置里写的引入路径是@/assets/scss/variables，默认会去assets下的scss子文件夹找文件，路径不匹配自然加载失败。
  如果你确实是把变量文件放在assets/scss目录下，确认目录和文件名拼写正确即可；如果是直接放在assets根目录，把引入路径改成@/assets/variables。
• 3. 修改配置后未重启项目
  vue.config.js属于项目核心配置文件，修改后不会触发热更新，必须完全停止本地开发服务，重新执行npm run serve启动才会加载新配置。

主流版本（sass-loader v10+）正确配置示例 #

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 路径按你实际文件位置调整即可
        additionalData: `@import "@/assets/variables";`
      }
    }
  }
}

额外提醒：你_variables.scss里定义的$white: black属于逻辑错误，后续使用时注意修正。

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