Laravel 9项目配置Vite将app.scss编译为指定目录的style.css

直接修改build.outDir无效是因为Laravel Vite插件会默认接管资源输出逻辑，覆盖该配置。以下是两种可行的配置方案：

方案一：通过Laravel Vite插件自定义入口输出路径 #

这是最贴合Laravel Vite生态的配置方式，可精准指定每个资源的输出位置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: {
                // 将app.scss编译为public/css/style.css
                'css/style': 'resources/sass/app.scss',
                // 可同时指定JS文件的输出路径（可选）
                'js/app': 'resources/js/app.js',
            },
            // 取消默认的build子目录，让资源直接输出到public根目录下的对应文件夹
            buildDirectory: '',
        }),
    ],
});

配置完成后，运行npm run build，资源会按指定路径生成：

• resources/sass/app.scss → public/css/style.css
• resources/js/app.js → public/js/app.js

在Blade模板中引用时，需对应修改路径：

@vite(['css/style.css', 'js/app.js'])

方案二：通过Rollup输出规则自定义（适合单CSS资源场景） #

如果需要更灵活的资源命名规则，可在build.rollupOptions中配置输出逻辑：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                // 单独处理CSS资源的输出路径
                assetFileNames: (assetInfo) => {
                    if (assetInfo.name?.match(/\.(scss|css)$/)) {
                        return 'css/style.css';
                    }
                    // 其他资源（如字体、图片）保持默认命名规则
                    return 'assets/[name].[hash][extname]';
                },
                // JS资源的输出规则（按需调整）
                entryFileNames: 'js/[name].[hash].js',
                chunkFileNames: 'js/[name].[hash].js',
            },
        },
    },
    plugins: [
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
    ],
});

注意：这种方式如果存在多个CSS入口，会导致输出文件覆盖，仅适合单CSS文件的场景。

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