Laravel多模块项目应将共享CSS集中存放于resources/css/shared/，各模块在webpack.mix.js中独立编译输出至隔离路径（如public/css/admin/和public/css/frontend/），Blade中按模块引用对应CSS，Vite需为每个模块配置JS入口并显式import共享CSS以实现样式隔离。
在Laravel多模块项目（如Admin/Backend与Frontend分离）中，不同模块需复用同一套基础UI样式（如按钮、表单、网格系统），但直接复制CSS文件会导致维护困难、版本不一致、构建产物冗余。
统一存放CSS源码，按模块编译输出
第一步：将所有共享CSS源码集中放在 resources/css/shared/ 目录下，例如：
resources/css/shared/base.css
resources/css/shared/forms.css
resources/css/shared/buttons.css
第二步：在每个模块对应的 webpack.mix.js 中分别引入这些共享文件——不要只在主项目里编译一次然后拷贝，必须各自编译，否则 HMR 热更新和 sourcemap 会失效。
第三步：为 Admin 模块配置 Mix 编译路径：
mix.sass('resources/css/shared/base.css', 'public/css/admin/base.css')
.sass('resources/css/shared/forms.css', 'public/css/admin/forms.css');
立即学习“前端免费学习笔记（深入）”；
第四步：为 Frontend 模块配置独立输出路径：
mix.sass('resources/css/shared/base.css', 'public/css/frontend/base.css')
.sass('resources/css/shared/buttons.css', 'public/css/frontend/buttons.css');
这一步不能省略：每个模块的 public/css/ 子目录必须隔离，避免 Admin 的 CSS 覆盖 Frontend 的同名文件，【否则部署时会静默覆盖，导致前端页面样式错乱】。
Blade 中按模块引用对应编译产物
方法一：在 Admin 布局视图（如 resources/views/admin/layouts/app.blade.php）中写：
<link href="{{ asset('css/admin/base.css') }}" rel="stylesheet">
<link href="{{ asset('css/admin/forms.css') }}" rel="stylesheet">
方法二：在 Frontend 布局视图（如 resources/views/frontend/layouts/app.blade.php）中写：
<link href="{{ asset('css/frontend/base.css') }}" rel="stylesheet">
<link href="{{ asset('css/frontend/buttons.css') }}" rel="stylesheet">
注意：绝对不要在子视图里用 ../../ 或 ../ 回退路径引用其他模块的 CSS——Laravel 的 public 是 Web 根目录，所有路径都必须以 / 开头或相对 public 解析，回退路径在 Nginx/Apache 下根本不可用。
避免用 @vite 多入口混引导致样式污染
如果你的项目已升级到 Vite，默认的 @vite(['resources/css/app.css']) 只能指向一个入口。若强行把 shared 文件夹下的多个 CSS 同时塞进同一个 @vite() 调用里，Vite 会把它们全部打包进一个带哈希的 bundle.css，结果 Admin 和 Frontend 加载的是同一份 CSS，无法做模块级样式隔离。
正确做法是：为每个模块单独定义 Vite 入口。
在 vite.config.js 中配置：
export default defineConfig({
build: {
rollupOptions: {
input: {
admin: './resources/js/admin/app.js',
frontend: './resources/js/frontend/app.js'
}
}
}
});
然后在 admin/app.js 中 import '../css/shared/base.css'；在 frontend/app.js 中 import '../css/shared/buttons.css'；再分别在对应布局中使用 @vite('admin') 或 @vite('frontend')。
这一步最关键：Vite 不会自动识别 .css 文件作为独立入口，【必须通过 JS 入口显式 import，否则 CSS 不会被打包】。
