执行run dev命令后app.css样式未在chat.blade.php页面生效是什么原因

问题排查&解决方案 #

你当前使用的是Laravel框架的Blade模板，默认前端构建工具会把resources目录下的前端源码编译后输出到public目录，你当前的引用路径写法和对应逻辑有误，按以下步骤逐一排查即可解决：

1. 修正CSS、JS的引用路径 #

Laravel不能直接引用resources目录下的源码文件，必须引用构建后输出到public目录的产物，且Blade模板有专用的辅助函数生成正确路径，不要用相对路径./css/app.css，这类路径会按页面路由解析非常容易出错：

• 如果你用的是Laravel 9+默认的Vite构建工具，把原有link、script标签全部替换为以下代码：

@vite(['resources/css/app.css', 'resources/js/app.js'])

• 如果你用的是旧版Laravel的Mix构建工具，把引用代码替换为：

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

2. 确认Tailwind配置正确 #

你的app.css里引入了Tailwind的基础指令，需要确认项目根目录下的tailwind.config.js已经配置了Blade模板的扫描路径，否则Tailwind不会生成对应的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改配置后需要重启npm run dev进程才会生效。

3. 验证构建服务运行状态 #

• 确认npm run dev执行后控制台无报错，有构建成功的提示
• 修改app.css后查看控制台是否触发了热更新，确认更新完成后再刷新页面
• 若还是不生效可以按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）强制刷新浏览器清除缓存后再验证

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