如何让Vite编译SCSS/Sass并输出独立CSS文件（Gulp迁移场景）

问题根源 #

当前配置存在两个核心问题：

• additionalData的作用是给每个SCSS文件注入代码片段，而非指定主SCSS入口。在这里全局导入app.scss，会导致所有SCSS文件重复引入它，后续在app.js中再次导入就会触发「已加载」的错误。
• 构建入口未单独包含SCSS文件，Vite仅处理JS入口关联的资源，因此不会单独输出对应的CSS文件。

修复步骤 #

1. 移除全局注入的SCSS导入
   删除css.preprocessorOptions.scss.additionalData配置项，避免全局重复引入SCSS文件。

2. 将SCSS添加为独立构建入口
   在build.rollupOptions.input中新增SCSS文件的入口，让Vite单独编译它为CSS资源。

3. （可选）JS中关联CSS的注意事项
   如果需要在JS中使用该CSS，仅在一处导入即可（比如app.js中），不要同时在构建入口和JS中重复操作，避免重复输出。

修改后的完整配置 #

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import path from 'path';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        { src: 'resources/assets/images', dest: '' },
        { src: 'resources/assets/fonts', dest: '' },
        { src: 'node_modules/bootstrap-sass/assets/fonts', dest: '' },
        { src: 'resources/assets/lib', dest: '' },
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 移除原有的全局SCSS注入配置
      }
    }
  },
  publicDir: 'static',
  build: {
    outDir: 'public',
    rollupOptions: {
      input: {
        app: 'resources/assets/js/app.js',
        intake: 'resources/assets/js/intake/main.js',
        main: 'src/main.js',
        // 新增SCSS独立入口
        styles: 'resources/assets/sass/app.scss'
      },
      output: {
        entryFileNames: 'js/[name].js',
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: ({name}) => {
          // 单独为CSS文件指定输出路径
          if (name?.endsWith('.scss') || name?.endsWith('.css')) {
            return 'css/[name]-[hash][extname]';
          }
          return '[name]-[hash][extname]';
        }
      }
    }
  },
  server: {
    port: Math.floor(3010 + Math.random() * (3999 - 3010))
  }
});

额外说明 #

• 构建完成后，编译好的CSS文件会输出到public/css/目录下，直接在Blade模板中通过<link>标签引入即可。
• 若仅需在JS中关联CSS（比如配合动态样式逻辑），只需在app.js中添加import '../sass/app.scss'，同时移除构建入口中的SCSS项，避免重复生成CSS文件。

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