Nuxt项目中:root内SASS变量未被插值编译的配置缺失排查

你遇到的核心问题主要有两个：一是SCSS变量在CSS自定义属性中没有被正确解析，二是Nuxt配置里的sass-loader选项存在版本适配问题和重复导入的情况。咱们一步步来修复：

1. 修正SCSS变量在CSS自定义属性中的写法 #

在你的_variables.scss里，直接把SCSS变量赋值给:root中的CSS自定义属性时，SCSS编译器不会自动替换变量值，而是把它当作普通字符串输出。必须使用**SCSS插值语法#{}**包裹变量，才能让编译器正确解析并替换：

修改后的_variables.scss：

// Base colors
$base: #ee464b;
$baseRgb: (238, 70, 75);
$black: #272839;
$blackRgb: (39, 40, 57);
$grey: #f4f4f8;

// Typography
$primaryTypography: 'Barlow', sans-serif;
@debug $primaryTypography; // -> 此语句输出正确值

:root {
  --thm-font: #{$primaryTypography};
  --thm-base: #{$base};
  --thm-base-rgb: #{$baseRgb};
  --thm-black: #{$black};
  --thm-black-rgb: #{$blackRgb};
  --thm-gray: #{$grey};
}

2. 修正Nuxt配置中的sass-loader设置 #

你的nuxt.config.js存在两个小问题：

• 已经在css数组里全局导入了main.scss，又在build.loaders.sass里重复导入，会导致样式冗余加载
• sass-loader 10版本中，prependData已经被官方更名为additionalData（这是版本迭代带来的参数变更）

如果你只是想通过main.scss统一管理所有样式（包括变量、组件/布局样式等），可以直接移除build.loaders的配置，因为css数组里的文件会被Nuxt自动编译并全局注入：

修改后的nuxt.config.js build部分：

build: {
  extend (config, ctx) {
  }
  // 移除之前的loaders配置，css数组已完成全局导入
}

如果你还希望在所有组件的<style lang="scss">中自动导入_variables.scss（不用每个组件手动写@import），可以保留loaders但修正参数名：

build: {
  extend (config, ctx) {
  },
  loaders: {
    scss: {
      additionalData: '@import "~@/assets/scss/_variables.scss";'
    }
  }
}

3. 确认main.scss的导入逻辑 #

确保你的main.scss里已经正确导入了_variables.scss，比如：

@import './_variables.scss';
// 后续可以继续导入其他样式文件，比如组件样式、布局样式等

验证结果 #

重新运行npm run dev或者npm run build，打开浏览器开发者工具查看:root的样式，你应该能看到--thm-font: 'Barlow', sans-serif;已经被正确编译了。

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