我在处理Laravel 6项目时遇到过好几次类似情况——Bootstrap能正常用，但自定义SCSS就是不生效，多半是编译流程、引入顺序或者缓存的问题，咱们一步步排查：

1. 确认自定义样式的引入顺序 #

CSS是层叠生效的，自定义样式必须放在Bootstrap引入之后，不然会被Bootstrap的默认样式覆盖。检查你的resources/sass/app.scss，结构应该是这样：

// 先引入Bootstrap核心文件
@import '~bootstrap/scss/bootstrap';

// 再写你的自定义样式
body {
    background-color: #f0f8ff;
}
.btn-custom {
    padding: 10px 20px;
    border-radius: 8px;
}

如果你的自定义代码写在Bootstrap前面，赶紧调整位置试试。

2. 重新编译前端资源 #

Laravel 6用Mix处理资源编译，修改SCSS后必须重新编译才能生效。执行对应命令：

• 开发环境（自动监听修改，实时编译）：
  npm run watch
• 生产环境（压缩优化代码）：
  npm run prod
• 单次编译开发版：
  npm run dev
  如果之前已经开了watch，建议重启一下——有时候它会漏掉某些文件的变更。

3. 检查Mix配置文件 #

打开webpack.mix.js，确认SCSS的编译路径配置正确，默认应该是：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

如果输出的CSS文件名或路径被修改过，要确保页面里引入的CSS路径和配置一致，不然浏览器加载的还是旧文件。

4. 清除浏览器缓存 #

浏览器经常会缓存旧的CSS文件，导致修改后看不到效果。可以：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面
• 打开浏览器开发者工具，在Network选项卡勾选「Disable cache」，再刷新页面

5. 检查选择器优先级 #

如果自定义样式的选择器优先级不够，也会被Bootstrap的样式覆盖。比如Bootstrap的.btn用了类选择器，你可以用更具体的选择器（比如.container .btn-custom），或者万不得已时用!important（尽量少用，避免样式混乱）：

.btn-custom {
    padding: 10px 20px !important;
    border-radius: 8px !important;
}

6. 确认页面正确引入编译后的CSS #

检查你的Blade模板，是否正确引入了编译后的public/css/app.css：

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

如果同时用了CDN引入Bootstrap，要确保本地编译的CSS在CDN之后引入，不然CDN的样式会覆盖本地自定义内容。

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