Nuxt项目报SassError: Undefined variable错误解决方案求助

问题排查与解决方案 #

1. 修复依赖冲突 #

你当前项目同时安装了已废弃的node-sass和官方推荐的sass（dart-sass）两个编译依赖，二者功能互斥会导致编译异常，先卸载node-sass：

npm uninstall node-sass
# 用yarn的话执行 yarn remove node-sass

保留sass和对应兼容版本的sass-loader即可，你当前的sass@1.43.4和sass-loader@8.0.2版本组合是兼容的，不需要再换版本。

2. 补全styleResources依赖与注册 #

要让styleResources配置生效，必须先安装对应模块并在Nuxt配置中注册：

• 安装开发依赖：

npm i @nuxtjs/style-resources -D
# 用yarn的话执行 yarn add @nuxtjs/style-resources -D

• 在nuxt.config.js中添加模块注册配置：

export default {
  // 其他原有配置...
  modules: [
    '@nuxtjs/style-resources'
  ],
  css: [
    '~assets/scss/main.scss'
  ],
  styleResources: {
    // 路径替换为别名写法更稳妥
    scss: ['~/assets/scss/variables.scss']
  },
}

3. 删除冗余的sass编译规则 #

Nuxt默认已经内置了sass/scss文件的编译处理逻辑，你手动在build.rules中添加的sass处理规则会覆盖默认逻辑，导致全局变量注入失效，直接删除build配置中如下冗余代码即可：

rules: [
  {
    test: /\.s[ac]ss$/i,
    use: ['style-loader', 'css-loader', 'sass-loader']
  }
],

4. 检查导入文件完整性 #

确认variables.scss中导入的_colors_variables.scss、_fonts.scss、_shadows.scss文件都真实存在，文件名拼写、下划线前缀没有错误，单文件导入失败会导致整个变量文件加载异常。

5. 清缓存重启项目 #

所有配置修改完成后，删除项目根目录下的.nuxt缓存文件夹，再重新执行启动命令npm run dev即可生效。

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