vite 原生不支持 `@import "./commons/**/*.scss"` 这类 glob 导入语法，需借助插件（如 `vite-plugin-sass-glob-import`）实现目录内所有 scss 文件的一键导入。
在从 Webpack 迁移至 Vite 的过程中，开发者常会遇到 Sass 全局导入能力缺失的问题。Webpack 的 sass-loader 支持通配符导入（例如 @import "./styles/commons/**/*.scss"），但 Vite 内置的 Sass 处理器（基于 sass 或 sass-embedded）默认不解析 glob 模式，该行为属有意设计——Vite 强调显式依赖与静态分析，避免隐式文件引入带来的构建不确定性。
✅ 推荐方案：使用社区维护的轻量插件
安装 vite-plugin-sass-glob-import：
npm install -D vite-plugin-sass-glob-import # 或 yarn add -D vite-plugin-sass-glob-import
在 vite.config.ts（或 .js）中启用插件：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import sassGlobImport from 'vite-plugin-sass-glob-import';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
sassGlobImport(), // ✅ 插件需放在 laravel 插件之后（确保 Sass 处理链生效）
],
});配置完成后，即可在任意 .scss 文件中安全使用：
// resources/css/app.scss @import "./commons/**/*.scss"; // ✅ 自动展开为所有匹配的 .scss 文件（按字母序）
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 插件仅作用于 Sass 编译阶段，不改变 Vite 的模块图解析逻辑，因此不会影响 HMR 精确性；
- 文件导入顺序按字母升序排列（如 _buttons.scss → _variables.scss），若存在依赖关系，请通过文件命名规范（如 _00-variables.scss）主动控制加载顺序；
- 不建议在生产环境过度依赖 glob 导入——它会降低样式可维护性。推荐将公共样式组织为明确的入口文件（如 index.scss），再由主文件显式导入；
- 若项目已使用 sass-embedded（Vite 4.3+ 默认），请确保插件版本 ≥ 2.0.0，以兼容新版 Sass API。
? 替代思路（不推荐）：
虽可通过预构建脚本生成 index.scss 并手动导入，但会增加构建步骤、破坏开发体验，且无法触发 Vite 的原生 HMR。插件方案更符合 Vite “零配置、开箱即用”的设计理念。
综上，vite-plugin-sass-glob-import 是当前最简洁、可靠且与 Laravel + Vite 生态兼容的解决方案，能无缝承接原有 Webpack 工作流中的 glob 导入习惯。
