大型 Laravel 项目需按功能与路由粒度拆分 CSS 为 base、layout、components、pages 四类，通过 PostCSS alias 统一引入，配合 Vite 动态加载或 Blade 按需注入，避免体积膨胀与样式冲突。
大型 Laravel 项目中单个 CSS 文件体积膨胀会导致首屏加载慢、热更新卡顿、协作时样式冲突频发，必须按功能与路由粒度拆分并精准引入，否则构建产物仍会合并回主包。
按功能模块拆分并统一入口管理
将 CSS 拆为 base、layout、components、pages 四类文件，分别存入 resources/css/ 下对应子目录，例如：resources/css/base/reset.css、resources/css/pages/dashboard.css。这种结构让团队成员能快速定位样式归属，避免在 app.scss 里无序追加规则。
在 resources/css/app.scss 中用 @use（Sass）或 @import（仅限构建期）按顺序引入，顺序不可颠倒：重置 → 基础变量 → 布局 → 组件 → 页面。页面样式必须放在最后，否则会被组件样式覆盖。
【禁止在 app.scss 中直接 @import '../pages/user.css' 这类相对路径】——Webpack/Vite 无法稳定解析，多人协作时极易因路径层级差异导致编译失败。
立即学习“前端免费学习笔记（深入）”；
改用 PostCSS 的 postcss-import 插件配合别名配置，在 postcss.config.js 中添加 alias 映射：{ paths: ['./resources/css'] }，然后统一写成 @import 'pages/dashboard.css';。
按路由动态加载 CSS（Vite 场景）
方法一：在对应页面的 Vue/React 组件中动态 import CSS
例如 resources/js/pages/UserProfile.vue 开头加入：import('./../../css/pages/user-profile.css');。Vite 默认开启 build.cssCodeSplit: true，该语句会触发单独生成 user-profile.abc123.css 并自动注入。
方法二：在路由定义中通过异步组件 + 样式预加载组合实现
在 resources/js/routes.js 中这样写：{ path: '/users', component: () => import('../pages/UserList.vue').then(() => import('../css/pages/user-list.css')) }。这确保 JS 和 CSS 同时加载，避免 FOUC。
注意：若使用 @vite 指令全局注入，需先移除 resources/css/app.css 中对 pages 目录的静态引用，否则拆分失效。
Blade 视图中按需注入特定 CSS
第一步：在主布局 resources/views/layouts/app.blade.php 的 <head> 内插入占位符：@yield('styles')。
第二步：在子视图顶部声明样式区块，例如 resources/views/users/index.blade.php：
@section('styles')
<link href="{{ asset('css/pages/users-index.css') }}" rel="stylesheet">
@endsection
第三步：确保该 CSS 文件已手动复制或通过 Mix/Vite 构建输出至 public/css/pages/users-index.css。asset() 不校验文件存在性，路径拼错只会静默 404。
这一步操作起来很简单，直接把编译后的 CSS 放进 public 对应路径就行。
若使用 Laravel Mix 编译，需在 webpack.mix.js 中显式指定 pages 目录参与构建：.sass('resources/css/pages/users-index.scss', 'public/css/pages/')。
