Vite批量导入SCSS的正确方式

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《Vite 批量导入 SCSS 的正确方法》，聊聊，希望可以帮助到正在努力赚钱的你。

Vite 原生不支持 `@import "./commons/**/*.scss"` 这类 glob 导入语法，需借助插件（如 `vite-plugin-sass-glob-import`）实现目录内所有 SCSS 文件的自动聚合导入。

在从 Webpack 迁移至 Vite 的过程中，开发者常期望保留原有便捷的 SCSS 全量导入方式——例如通过 @import "./commons/**/*.scss" 一次性加载整个目录下的样式文件。遗憾的是，Vite 官方明确表示不会原生支持此类 glob 导入语法（参见 vite#6371），其设计哲学更倾向于显式依赖与静态分析，以保障 HMR 精准性与构建可靠性。

✅ 推荐解决方案：使用社区成熟插件
目前最轻量、稳定且专为此场景设计的插件是 vite-plugin-sass-glob-import。它在 Sass 编译阶段拦截 @import 语句，将 **/*.scss 模式动态解析为实际文件列表，并按字母序（或自定义顺序）展开导入，完全兼容 Vite 的开发服务器与生产构建流程。

配置步骤如下：

1. 安装插件：

   npm install -D vite-plugin-sass-glob-import
   # 或
   yarn add -D vite-plugin-sass-glob-import

2. 在 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(), // ✅ 启用 glob 导入支持 ], });

3. 在你的主 SCSS 文件（如 `resources/css/app.scss`）中，即可安全使用：
```scss
// 自动导入 commons/ 下所有 .scss 文件（含子目录）
@import "./commons/**/*.scss";

// 也可限定层级，例如仅一级子目录
// @import "./commons/*/*.scss";

⚠️ 注意事项：

• 插件默认按文件路径字母序导入，若存在依赖顺序要求（如变量/混合宏需前置），建议通过命名规范控制（如 _00-variables.scss, _01-mixins.scss）；
• 不支持 @use 语法的 glob 导入（该插件仅处理 @import），但 Laravel + Vite 场景下通常仍以 @import 为主流；
• 生产构建时，插件会静态解析路径，不影响输出体积或运行时性能；
• 若项目已升级至 Sass v2（Dart Sass 2.x），请确认插件版本 ≥ 2.0.0（兼容最新 Sass API）。

? 替代思路（不推荐）：
虽可编写预处理脚本（如 Node.js 脚本遍历目录生成 index.scss 并手动导入），但会破坏热更新链路、增加维护成本，且无法响应文件增删的实时变化——插件方案才是符合 Vite 工程化理念的正确选择。

综上，vite-plugin-sass-glob-import 是当前 Laravel + Vite 项目中实现 SCSS 目录级导入的首选方案：零配置开箱即用、深度集成构建流程、长期维护活跃，能平滑承接 Webpack 时期的开发习惯。

理论要掌握，实操不能落！以上关于《Vite批量导入SCSS的正确方式》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！