Laravel项目Webpack转Vite：批量导入SCSS文件问题求助

Vite本身不支持SCSS原生的@import "./commons/**/*.scss"这种glob语法，但有两种简单的实现方式：

方法一：在JS入口文件中用Vite原生import.meta.glob批量导入 #

直接在你的主JS文件（比如resources/js/app.js）里添加以下代码：

// 批量导入指定目录下所有SCSS文件，eager: true表示立即加载
import.meta.glob('../css/commons/**/*.scss', { eager: true });

这样Vite会自动解析所有匹配的SCSS文件，处理后注入到项目中，效果和Webpack的glob导入一致。

方法二：生成自动导入的SCSS文件 #

如果更习惯在SCSS文件中管理导入，可以写一个简单的Node脚本自动生成包含所有@import语句的SCSS文件：

1. 在项目根目录创建generate-scss-imports.js，内容如下：

const fs = require('fs');
const path = require('path');

const targetDir = path.resolve(__dirname, 'resources/css/commons');
const outputFile = path.resolve(__dirname, 'resources/css/_auto-imports.scss');

// 遍历目录获取所有scss文件
function getScssFiles(dir) {
  let files = [];
  const items = fs.readdirSync(dir, { withFileTypes: true });
  for (const item of items) {
    const fullPath = path.join(dir, item.name);
    if (item.isDirectory()) {
      files = [...files, ...getScssFiles(fullPath)];
    } else if (item.name.endsWith('.scss')) {
      // 生成相对路径（相对于outputFile的位置）
      const relativePath = path.relative(path.dirname(outputFile), fullPath);
      files.push(`@import "${relativePath}";`);
    }
  }
  return files;
}

const imports = getScssFiles(targetDir);
fs.writeFileSync(outputFile, imports.join('\n'));

2. 在package.json的scripts里添加相关命令：

"scripts": {
  "generate-scss-imports": "node generate-scss-imports.js",
  "dev": "npm run generate-scss-imports && vite",
  "build": "npm run generate-scss-imports && vite build"
}

3. 在你的主SCSS文件（比如resources/css/app.scss）里导入生成的文件：

@import "./_auto-imports.scss";

这样每次启动开发服务或构建时，都会自动更新导入列表，无需手动维护。

两种方法都能实现你需要的批量导入效果，第一种更简洁，第二种适合更偏向SCSS文件管理的场景。

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