Javascript 如何使用Laravel中的app.js和app.css修复错误404?
我使用的是Laravel6和Bootstrap4 我制作了一个小应用程序,我试图改变CSS文件中主体的背景颜色,但我注意到它不起作用 所以我检查了开发人员的工具,发现关于app.js和css/app.css “加载资源失败:服务器响应状态为404(未找到)” 我尝试在CSS路径之前添加一个“/”,但失败了 查看:Javascript 如何使用Laravel中的app.js和app.css修复错误404?,javascript,css,laravel,twitter-bootstrap,laravel-6,Javascript,Css,Laravel,Twitter Bootstrap,Laravel 6,我使用的是Laravel6和Bootstrap4 我制作了一个小应用程序,我试图改变CSS文件中主体的背景颜色,但我注意到它不起作用 所以我检查了开发人员的工具,发现关于app.js和css/app.css “加载资源失败:服务器响应状态为404(未找到)” 我尝试在CSS路径之前添加一个“/”,但失败了 查看: <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="overflow: hidden; ">
<div id="app">
@include('../inc/navbar')
<main class="py-4">
@yield('content')
</main>
<br>
<br>
<br>
@include('../inc/footer')
</div>
</body>
</html>
body {
background-color: lightblue !important;
}
我想看看浅蓝色的身体,但由于某种原因它不工作。你有什么想法吗
我试图更改css文件中主体的背景颜色,但我注意到它不起作用
如果这是新安装的Laravel,您将需要运行npm install
。安装所有前端资产(css、js等)。如果您从未对css或js进行过任何更改,则在终端中需要运行以下命令:npm run dev
或npm run watch
。为拉维混合
您不想触摸实际的.css
文件;每当资产编译时,它都会被覆盖。使用上述命令将所有.scss
文件重新编译为.css
希望这有帮助 您需要编译资产。(假设您已经安装了npm) 跑 或
您还可以在编译资产之前更改文件
resources/sass/_variables.scss
中的颜色。此错误表示app.js
和app.css
的位置不正确:
加载资源失败:服务器以404状态响应
(未找到)”
解决方案:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="overflow: hidden; ">
<div id="app">
@include('../inc/navbar')
<main class="py-4">
@yield('content')
</main>
<br>
<br>
<br>
@include('../inc/footer')
</div>
</body>
</html>
body {
background-color: lightblue !important;
}
使您的目录结构与JS类似:/public/JS/app.JS
使您的目录结构与CSS类似:
/public/CSS/app.CSS
您在yourproject/public/CSS
中有一个app.CSS
文件,在yourproject/public/js
中有app.CSS
文件,在meetingapp/CSS/app.CSS
中有app.js
文件meetingapp/resources/js/app.js
。。。但即使在资产中添加文件夹资源也不起作用。我安装了npm,并让npm运行dev。。。现在这两个错误消失了,但身体的背景颜色仍然是白色。此外,现在导航栏的下拉菜单不起作用。。。Popper可能有问题吗?您需要在resources/sass/app.scss
(或您正在使用的任何.scss
文件)中更改背景颜色。然后重新运行npm run dev
以重新编译css。如果您使用的是引导,则可能需要单独拉入每个组件。或者查看有关如何从Bootstrap获取完整js库的文档。如果您使用符号链接将index.php放入/var/www/your站点,请确保将css和js文件夹从public符号链接到/var/www/your站点。