只配 css 数组不够用，因为它仅将样式注入全局 CSS 流，不参与 Vue 组件内 <style lang="scss"> 的编译上下文，导致 SCSS 变量无法在组件中访问；必须通过 vite.css.preprocessorOptions.scss.additionalData 或 @nuxtjs/style-resources 实现变量自动注入。
直接在 nuxt.config.ts 的 css 数组里写 ~/assets/scss/main.scss 就能全局引入样式，但变量不会自动生效；想让所有 .vue 文件都能直接用 $primary-color 这类变量，必须配 vite.css.preprocessorOptions.scss.additionalData 或用 @nuxtjs/style-resources。
为什么只配 css 数组不够用？
因为 css 数组只负责把文件内容“注入到全局样式流”，它不参与 Vue 单文件组件内 <style lang="scss"> 的编译上下文。你在 main.scss 里定义的 $color 变量，在组件的 <style> 块里根本看不见——相当于两个隔离的 Sass 编译环境。
- 只靠
css: ['~/assets/scss/main.scss']→ 全局 CSS 生效，变量不可用 - 组件内写
@import '~/assets/scss/variables.scss'→ 可用但重复、繁琐、易漏 - 正确做法：让每个
<style lang="scss">都默认带上变量和 mixins
推荐方案：用 vite.css.preprocessorOptions.scss.additionalData
Nuxt 3 / 4 默认基于 Vite，这是目前最轻量、最可控的方式，无需额外装模块。关键点是路径要加 @use，且 as * 表示把变量、函数、mixin 全部提升到当前作用域。
export default defineNuxtConfig({
css: ['~/assets/scss/main.scss'],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/assets/scss/variables.scss" as *;
@use "~/assets/scss/mixins.scss" as *;`
}
}
}
}
})
-
additionalData是 Vite 原生支持项，Nuxt 直接透传，稳定无兼容风险 - 路径必须用
~别名，不能写../assets/...（Vite 不识别相对路径） - 多个文件用换行分隔，不要用
;拼接，否则 Sass 解析失败 - 如果用了
@forward或@use with，确保被引用文件本身语法合法
备选方案：用 @nuxtjs/style-resources 模块
适合 Nuxt 2 迁移项目或团队已有习惯。它本质是自动给每个 <style> 块前插入 @import，但要注意它不支持 @use 语法，只能用于传统 @import 风格的 SCSS。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install --save-dev @nuxtjs/style-resources - 配置：
modules: ['@nuxtjs/style-resources']，然后加styleResources字段 - 路径写法：
scss: ['~/assets/scss/variables.scss', '~/assets/scss/mixins.scss'] - ⚠️ 它会把每个文件内容原样拼进去，所以
variables.scss里不能有@use，否则报错 - 不推荐新项目用，因为
@use是 Sass 官方推荐方式，@import已被标记为 deprecated
容易踩的坑：路径、顺序与 SSR
SCSS 全局引入失败，90% 出在路径或加载时机上。尤其 SSR 场景下，Node.js 环境对路径解析更严格。
-
~/assets/...✅ 正确；/assets/...❌ 绝对 URL，构建时找不到文件 - 变量文件必须放在
assets下，不能放static或public（它们不走编译流程） -
css数组里多个文件有依赖关系时，被依赖的（如variables.scss）必须排在前面——但它其实不生效，真正起作用的是additionalData里的顺序 - 开发时改了
variables.scss但组件里变量没更新？重启nuxi dev，HMR 对 SCSS 全局变量支持不稳定 - SSR 渲染时出现
Undefined variable "$primary-color"，基本是additionalData路径没被 Node.js require.resolve 到，检查别名是否注册、文件是否存在
真正麻烦的不是配置本身，而是变量和样式在不同上下文（全局 CSS、组件 scoped style、JS 逻辑中 CSS-in-JS）之间的割裂。一旦你开始在 JS 里动态计算颜色或生成 class 名，就得同步维护 JS 和 SCSS 两套变量——这时候该考虑抽成 runtimeConfig.public 或 CSS 自定义属性了。
