基本 JS 文件加载但不渲染或执行 Laravel 8 Bootstrap 5
Posted
技术标签:
【中文标题】基本 JS 文件加载但不渲染或执行 Laravel 8 Bootstrap 5【英文标题】：Basic JS File Loading but Not Rendering or Executing Laravel 8 Bootstrap 5 【发布时间】：2021-11-02 21:05:41 【问题描述】：你好， 我有一个新的 laravel 和 bootstrap 安装。到目前为止，我只有一个导航栏。当我加载页面查看它时，我注意到 app.js 文件加载但不呈现 CSS，因为 app.css 样式表完全为空。 app.css 和 app.js 都位于正确引用的目录中。如果我使用 bootstrap 5 CDN，一切正常。在我的另一个项目中，这也是一个全新的安装，CSS 工作得很好。我没有修改这个全新安装。
<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('Template 2', 'Template2') </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 href=" asset('css/app.css') " rel="stylesheet">
</head>
这就是它在我的 webpack.mix.json 中的编译方式：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
提前致谢。
【问题讨论】：
有吗，怎么编译的？ Webpack getbootstrap.com/docs/5.1/getting-started/webpack ? 自动来自 webpack。请看我的编辑。我遵循通常的步骤，但由于某种原因，这次它不起作用。 【参考方案1】：我是这样解决的：
我在public/app.css 中注意到它正在编译引导程序 4.6。
composer 需要 laravel/ui
npm 安装引导程序
打开package.json以确保最新版本的引导程序：
"devDependencies":
"bootstrap": "^5.1.0",
,
然后我删除了我的 public/app.css 并重新制作了一个空白 app.css
npm run dev mix
希望这对某人有所帮助
【讨论】：
以上是关于基本 JS 文件加载但不渲染或执行 Laravel 8 Bootstrap 5的主要内容，如果未能解决你的问题，请参考以下文章