Laravel 与引导程序 4 混合

Question

I have been learning Laravel (8) and have enjoyed working with tailwindcss. That said there are some things I still wish to use Bootstrap for. I am having trouble locating documentation on how to set up bootstrap with laravel mix in laravel 8. More specifically, in the resources/css/app.css file we put the following for tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

but Im not sure what would go here for bootstrap.

I noticed older versions of laravel used php artisan ui bootstrap but that is not available in Laravel 8 from what I have seen.

Answer 1

Run: npm install --save-dev bootstrap jquery popper.js

How your webpack.mix.js should look:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css');

How your app.scss should look:

@import '~bootstrap/scss/bootstrap';

How your app.js should look:

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');

This is how you could use generated files in your .blade.php files:

<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>

If you want to customize Bootstrap, copy node_modules/bootstrap/scss/_variables.scss to resources/sass/_variables.scss , change variables you want and change your app.scss to:

@import '~bootstrap/scss/functions';
@import 'variables';
@import '~bootstrap/scss/bootstrap'; 

You have some helpful documentation on https://getbootstrap.com/docs/4.0/getting-started/webpack/

Laracasts is also quite helpful.

Answer 2

Seems to be available in Laravel v8.24.0 though.

Be aware that doing this procedure do regenerate the webpack.mix.js.

Steps are:

• install laravel ui: composer require laravel/ui
• generate scaffolding: php artisan ui bootstrap
• optionnaly generate the same for auth: php artisan ui bootstrap --auth
• make npm install required packages: npm install
• compile assets: npm run dev or npm run production (for development or for production)

Then make sure to have the following in your blade templates:

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

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

Answer 3

use this steps

npm install bootstrap
npm install @popperjs/core
npm install sass@^1.32
npm install sass-loader

For Bootstrap Sass files, let's create the “scss” folder in /resources and then a new app.scss file in /resources/scss/. Then insert the following line to the /ressources/scss/app.scss file

@import "bootstrap";

For Bootstrap JavaScript, insert the following line to the /resources/js/app.js file:

import "bootstrap";

To compile Bootstrap JavaScript and Sass files with Laravel Mix, you need to edit the /webpack.mix.js file as follows:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass("resources/scss/app.scss", "public/css");

now you can run you command

npm run dev

Now that we have the /public/css/app.css and /public/js/app.js files with Bootstrap included, we can include them on a page (template Blade) via Laravel's asset helper () to use the Bootstrap components

On your Head

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

On your footer

<script src="{{ asset('js/app.js') }}"></script>

now i think he will work enjoy