如何用Vite编译未被React引入的额外SCSS与JS文件

要处理未被React项目引入的额外SCSS和JS文件编译需求，不需要依赖copyPublicDir（它只会复制文件不编译），直接在Vite配置中添加额外入口即可，和Webpack的多入口配置逻辑类似。

具体配置步骤 #

修改你的vite.config.js，通过build.rollupOptions扩展入口并指定输出规则：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.jsx'], // 保留原React应用入口
      refresh: true,
    }),
    react(),
  ],
  build: {
    rollupOptions: {
      input: {
        // 原React应用入口
        app: 'resources/js/app.jsx',
        // 添加需要独立编译的文件
        extra_styles: 'resources/sass/extra-styles.scss',
        extra_scripts: 'resources/js/extra-scripts.js',
      },
      output: {
        // 指定输出到build目录
        dir: 'build',
        // 自定义输出文件名（可选，避免自动hash的话用这个配置）
        entryFileNames: 'assets/js/[name].js',
        chunkFileNames: 'assets/js/[name].js',
        assetFileNames: 'assets/css/[name].[ext]',
      },
    },
  },
});

配置说明 #

• 额外入口：在rollupOptions.input里新增键值对，键是输出文件的名称前缀，值是源文件路径。Vite会自动编译SCSS为CSS，处理JS的转译、打包。
• 输出目录：通过output.dir指定编译后的文件输出到build目录，如果你想放到Laravel默认的public目录下，改成public/build即可。
• 文件名规则：如果不需要缓存戳（hash值），用[name]保留原文件名；需要缓存优化的话，可以改成[name].[hash].js/[name].[hash].css。

执行编译 #

运行常规的Vite构建命令：

npm run build

编译完成后，你会在build/assets/css/找到编译好的extra-styles.css，在build/assets/js/找到extra-scripts.js，这些文件可以直接用于其他流程。

注意事项 #

• 确保这些独立文件没有被React应用通过import引入，否则会被打包到主应用bundle中，造成重复编译。
• 如果需要对这些文件单独配置编译规则（比如特殊的SCSS变量、PostCSS插件），可以通过Vite的css选项或者插件的include/exclude参数来区分。

内容的提问来源于stack exchange，提问作者Kaki Master Of Time