新建Laravel项目引入Bootstrap与自定义CSS样式不生效如何解决

问题根因 #

asset() 函数默认指向Laravel项目根目录下的 public 文件夹，resources 目录属于项目内部代码目录，不对外暴露可访问，你当前所有静态资源放在 resources 目录下，浏览器无法请求到对应文件，所以样式和JS完全不生效。

解决方案 #

方案1：直接移动资源到public目录（最简单，无需前端构建工具）

• 新建 public/css 目录，将 resources/css 下的所有CSS文件（bootstrap.min.css、app.css等）移动到该目录
• 新建 public/js 目录，将 resources/js 下的所有JS文件（jquery-3.6.0.min.js、popper.min.js、bootstrap.min.js等）移动到该目录
• 原有 welcome.blade.php 中的资源引入代码无需修改，直接刷新页面即可生效。

方案2：通过Laravel前端构建工具编译引入（适合后续需要前端工程化处理的场景）

1. 打开 resources/css/app.css，引入bootstrap样式：

@import './bootstrap.min.css';
/* 你自己写的自定义样式写在后面即可 */
section {
    color: red;
}

2. 打开 resources/js/app.js，引入JS依赖：

import './jquery-3.6.0.min.js'
import './popper.min.js'
import './bootstrap.min.js'

3. 终端执行命令安装前端依赖并编译资源：

npm install
# Vite版本Laravel执行
npm run build
# 旧版Mix版本Laravel执行
npm run prod

4. 将 welcome.blade.php 中原有的资源引入代码替换为Vite/Mix辅助函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Osama The Coder</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <section class="text-danger">
        Hello World
    </section>
</body>
</html>

问题排查 #

如果修改后仍然不生效，打开浏览器开发者工具的「网络」面板，查看CSS/JS资源的请求状态：

• 如果返回404，核对文件存放路径、文件名拼写、大小写（Linux环境对大小写敏感）是否和引入路径一致
• 如果返回200但样式不对，按 Ctrl+Shift+R（Windows）/ Cmd+Shift+R（Mac）强制刷新浏览器清空缓存重试。

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