基本 JS 文件加载但不渲染或执行 Laravel 8 Bootstrap 5答案

【问题标题】：Basic JS File Loading but Not Rendering or Executing Laravel 8 Bootstrap 5基本 JS 文件加载但不渲染或执行 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。请看我的编辑。我遵循通常的步骤，但由于某种原因，这次它不起作用。

标签： javascript html css laravel bootstrap-5

【解决方案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

希望这对某人有所帮助

【讨论】：