@use是唯一安全方式，因@import是“内容复制”机制，每次导入都全量展开并重复编译，导致mixin覆盖、CSS规则重复输出、体积膨胀及FOUC风险。
@use 是唯一安全的方式，@import 必然导致重复打包和静默覆盖。
为什么 @import 会让 SCSS mixin 重复打包？
@import 不是“引用”，而是“内容复制”——每次遇到就展开全部内容到当前作用域。两个组件都 @import "mixins/flex.scss"，里面都有 @mixin flex-center()，第二个会直接覆盖第一个，且构建时生成两份相同的 CSS 规则。DevTools 的 Network 面板里能看到同一段样式被注入多次，CSS 文件体积膨胀，FOUC 风险上升。
更隐蔽的问题是：Dart Sass 已在 2026 年正式废弃 @import，Nuxt 3 构建链路（基于 Vite + esbuild）对它的支持正在弱化，某些更新后可能直接报错。
用 @use + 入口聚合实现真正全局可用
核心思路：只在一个地方 @use 所有 mixin，并通过 as * 提升到全局作用域；其他所有组件不再手动 @use 或 @import。
立即学习“前端免费学习笔记（深入）”；
- 新建
~/assets/scss/index.scss，集中管理模块：
@use "mixins/flex" as f; @use "mixins/layout" as l; @use "mixins/theme" as t; <p>// 只有这一行允许用 as <em> @use "./index" as </em>;
- 在
nuxt.config.ts的css数组中引入它（不是styleResources）：
export default defineNuxtConfig({
css: ['~/assets/scss/index.scss']
})- 确保
assets/scss/下的文件都用@use，禁用任何@import - 删除所有组件内
@import "@/assets/scss/index.scss"或类似写法——这会导致重复解析
避免 styleResources 模块的陷阱
@nuxtjs/style-resources 看似省事，但它本质是把 SCSS 内容“注入到每个组件的 style 块开头”，等价于每个组件都执行了一遍 @use ... as *。结果就是：mixin 虽然能用，但变量、函数、甚至嵌套规则都会被重复编译进每个组件的 CSS chunk 中。
尤其当项目开启 code splitting 时，styleResources 会让相同 mixin 在 pages/index.css、components/Button.css、layouts/default.css 里各存一份。这不是“全局引入”，是“全局污染”。
如果你已经用了该模块，请立刻移除，并改用上述 css 数组 + 单一入口 @use 方案。
检查是否真的没重复
构建后打开 .output/public/_nuxt/ 目录，搜索 flex-center 或你常用 mixin 名。如果只在 entry.css（或类似主 CSS 文件）中出现一次，说明成功；若在多个 pages/*.css 里反复出现，说明仍有组件在偷偷 @import，或 nuxt.config.ts 的 css 数组里漏写了路径，或用了 static/ 目录下未参与构建的文件。
最易忽略的一点：VS Code 插件或旧脚手架模板可能自动生成带 @import 的 .vue 文件头，务必人工检查并清理。
