public/css只应存放编译后的最终CSS文件,不得放入Sass源码、partial文件或未压缩开发版;小项目放app.css和custom.css,中型项目按core/modules/vendor分层,须用mix()或asset()正确引入,严禁手动复制或混入构建配置文件。

刚跑通php artisan serve却在public/css里堆了8个命名混乱的CSS文件,页面样式错乱还找不到源头——这不是代码问题,是目录结构没理清。
先搞懂public/css到底该放什么
public/css只放最终可被浏览器直接访问的、已编译完成的CSS文件,【绝不放Sass/Scss源文件、未压缩的开发版、或任何带下划线前缀的partial文件】。Laravel默认不处理CSS编译,你放进去的每一个.css文件都会被Web服务器原样吐给浏览器,没有自动合并、没有版本哈希、没有条件加载。
如果你用Vite或Laravel Mix编译前端资源,所有源码必须放在resources/css下,public/css只是编译产物的“出口”。把scss文件直接丢进public/css,它不会被编译,只会被当作普通文本暴露在公网——这既是安全风险,也是维护灾难。
小项目(1~3个页面)的极简结构
直接在public/css下放两个文件即可:
立即学习“前端免费学习笔记(深入)”;
app.css —— 所有全局样式(重置、基础排版、工具类)
custom.css —— 页面级覆盖样式(比如首页banner高度、登录页按钮圆角)
不要建子文件夹,不要加版本号后缀,不要分vendor.css和main.css——小项目过早分层,只会让require路径变长、缓存失效更难控制。
中型项目(含后台+多业务模块)的分层方案
第一步:创建public/css/core/目录,放基础样式体系
第二步:创建public/css/modules/目录,每个业务模块一个CSS文件,如ticket.css、report.css、user-profile.css
第三步:创建public/css/vendor/目录,仅放第三方UI库的CDN fallback文件(如Bootstrap 5.3.3完整CSS),【禁止放未压缩的dev版或带source map的版本】
第四步:在Blade模板中按需引入:<link rel="stylesheet" href="{{ mix('css/core/app.css') }}"> → <link rel="stylesheet" href="{{ mix('css/modules/ticket.css') }}">
注意:mix()函数依赖webpack.mix.js配置,若未启用Laravel Mix,这些路径会404——此时应改用asset()并确保文件真实存在于public/css下。
避免踩坑的硬性规则
public/css里不能出现以_开头的文件(如_main.css),这是Sass partial约定,浏览器不会加载,但Git会同步,徒增混淆。
不要把tailwind.config.js或postcss.config.js放进来——它们属于构建工具链,必须留在项目根目录或resources目录下。
每次部署前运行npm run build(或yarn build),确保public/css下的文件是最新编译结果;手动复制CSS文件进去,会导致线上样式和本地开发不一致。


















