Laravel 11中Vite多app.scss编译合并问题求助

问题原因 #

你当前的vite.config.js使用数组形式声明input资源，Laravel Vite插件默认会将所有独立的CSS入口合并为单个文件输出，这是插件为简化配置设定的默认行为，不符合你拆分前后台样式的需求。

解决方案 #

将input从数组改为键值对对象，给每个资源入口指定唯一名称，Vite会根据这些名称生成对应的独立输出文件，同时保留生产环境所需的hash后缀。

修改后的配置文件 #

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

export default defineConfig({
    plugins: [
        laravel({
            input: {
                // 后台资源
                'admin-css': 'resources/assets/admin/sass/app.scss',
                'admin-js': 'resources/assets/admin/js/app.js',
                // 前端资源
                'frontend-css': 'resources/assets/frontend/sass/app.scss',
                'frontend-js': 'resources/assets/frontend/js/app.js',
            },
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            external: ['axios'],
        },
    }
});

在Blade模板中引用资源 #

修改配置后，需在对应页面模板中使用指定名称引用资源：

• 后台页面：

{{-- 引入后台样式 --}}
@vite('admin-css')
{{-- 引入后台JS --}}
@vite('admin-js')

• 前端页面：

{{-- 引入前端样式 --}}
@vite('frontend-css')
{{-- 引入前端JS --}}
@vite('frontend-js')

验证输出 #

执行npm run build后，public/build/assets目录下会生成独立的CSS和JS文件，类似：

public/build/assets/admin-css-[hash].css
public/build/assets/frontend-css-[hash].css
public/build/assets/admin-js-[hash].js
public/build/assets/frontend-js-[hash].js

同时manifest.json会正确映射每个入口的资源路径，Laravel的@vite指令会自动解析带hash的文件名。

可选：自定义输出文件名 #

如果需要更自定义的文件名（比如去掉hash或用固定名称），可在build.rollupOptions.output中配置：

build: {
    rollupOptions: {
        external: ['axios'],
        output: {
            assetFileNames: 'assets/[name].[ext]', // 资源文件（CSS、图片等）
            chunkFileNames: 'assets/[name].js',
            entryFileNames: 'assets/[name].js',
        }
    },
}

注意：生产环境建议保留hash以实现缓存刷新，仅在特殊场景下考虑去掉。

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