Bootstrap 在 laravel react ui 中不起作用答案

【问题标题】：Bootstrap is not working in laravel react uiBootstrap 在 laravel react ui 中不起作用
【发布时间】：2021-05-10 01:38:08
【问题描述】：

我已经使用php artisan ui react 设置了带有 React UI 的新 laravel 项目。是否安装了 npm 和 npm run dev。在welcome.blade.php 中添加了react id 和脚本链接。现在示例反应组件正在加载，但该页面上不存在引导样式。我的代码如下， app.js：

require('./bootstrap');



require('./components/Example');

Example.js：

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

我使用的是 laravel 8.12。我错过了什么吗？

【问题讨论】：

看起来您可能缺少一个 css 组件。另外，如果您在做出反应，我会引入 bootstrap-react，以便您可以在 react-bootstrap.github.io 中添加组件
在哪里添加 css 组件？在 example.js 或刀片文件中。我很困惑，因为我看到的每个教程或视频都在初始设置后获得引导样式。
import './<pathToStyle>/bootstrap.css';。并且不要忘记 bootstrap 需要 jquery 才能使许多组件正常运行，我认为我怀疑卡不会......它会在 example.js 中
@RyanH 感谢您的帮助。我通过在app.css中添加节点模块bootstrap scss的正确路径来解决它，它是在@import '~bootstrap/scss/bootstrap';之前我将其更改为@import "../../node_modules/bootstrap/scss/bootstrap";并将其导入我的example.js。

标签： javascript php reactjs laravel bootstrap-4

【解决方案1】：

您需要包含样式：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

到您的welcome.blade.php 查看文件，该文件位于<div id="example"></div>

【讨论】：

【解决方案2】：

我在使用 bootstrap ui 时遇到了分页错误的问题。

另外，我建议将此代码添加到 AppServiceProvider。

use Illuminate\Pagination\Paginator;

public function boot()
{
     Paginator::useBootstrap();
}

【讨论】：