Laravel Mix问题：Public目录下CSS文件被重复覆盖

我之前也踩过这个坑！核心原因很简单：你直接修改public/app.css是无效的——Laravel Mix的工作逻辑就是从你的源样式文件（比如resources/css或resources/sass下的文件）编译生成public目录下的最终样式文件，每次执行npm run dev（或watch/prod）时，Mix都会重新编译并覆盖public里的输出文件，所以你手动改的内容肯定会被冲掉。

下面是彻底解决的步骤：

• 修改正确的源文件：所有样式调整都应该在resources/css/app.css（如果用Sass预处理器就是resources/sass/app.scss）里进行，这才是Mix真正的编译入口。改完这里再执行npm run dev，你的修改就会正确同步到public/app.css里，而且不会被莫名覆盖。
• 确认Mix配置：打开项目根目录的webpack.mix.js，找到样式编译的代码，比如：

  // CSS编译示例
  mix.css('resources/css/app.css', 'public/css');
  // Sass编译示例
  mix.sass('resources/sass/app.scss', 'public/css');
  

  这里第一个参数就是源文件路径，第二个是输出到public的位置，确保你修改的是第一个参数对应的文件。
• 特殊需求：临时停止样式编译：如果你确实有特殊情况需要直接修改public/app.css且不想被覆盖（不推荐长期这么做，不利于维护），可以在webpack.mix.js里注释掉对应的样式编译规则，比如把上面那行代码注释掉，这样执行npm run dev时就不会再重新编译样式文件了。
• 版本控制建议：记得把public/css/app.css这类编译产物加入.gitignore，只提交源样式文件和webpack.mix.js，避免仓库里出现不必要的编译文件冲突。

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