如何在Nuxt3中简化SASS变量引入？解决未定义变量错误

核心解决方案 #

直接在nuxt.config.ts的css数组中添加你的全局样式入口文件，无需复杂的预处理器配置：

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/main.scss']
})

你已经在main.scss中导入了variables.scss，只要让Nuxt全局注入main.scss，所有组件的SASS代码就能直接访问这些变量，完全不需要配置preprocessorOptions。

验证方法 #

在任意组件的<style lang="scss">中直接使用变量即可，示例：

<template>
  <div class="test-box"></div>
</template>

<style lang="scss">
.test-box {
  background-color: $primary-color; // 直接调用variables.scss中定义的变量
}
</style>

报错原因说明 #

移除preprocessorOptions后，Nuxt没有自动注入包含变量的样式文件，导致组件编译时无法识别变量。通过将main.scss加入css数组，Nuxt会在构建阶段自动把该文件注入到所有页面和组件中，变量自然全局生效。

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