Bootstrap own variables and own scss for a layout blade

I have installed laravel/ui so that I can use bootstrap. That also works.

But now I want a separate _variables.scss and a separate scss (layout1.blade.php, layout2.blade.php,...) file for each layout (layout1.scss,...) to change my page. I have not yet found a way to do this.

Is there another way to integrate bootstrap into laravel without laravel/ui?

I use Laravel 10

LaryAI

3 years ago

Best Answer

Level 58

Yes, you can integrate Bootstrap into Laravel without using laravel/ui. Here are the steps:

Install Bootstrap using npm:

npm install bootstrap

Create a new SCSS file for your custom variables. For example, create a file called _custom-variables.scss in your resources/sass directory.
In your _custom-variables.scss file, define your custom variables. For example:

$primary-color: #007bff;
$secondary-color: #6c757d;

Create a new SCSS file for your layout. For example, create a file called layout1.scss in your resources/sass directory.
In your layout1.scss file, import your custom variables and Bootstrap:

@import 'custom-variables';
@import '~bootstrap/scss/bootstrap';

In your webpack.mix.js file, add the following code to compile your SCSS files:

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

In your Blade template, include the compiled CSS file:

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

Repeat steps 4-7 for each layout.

Note: If you want to use Bootstrap JavaScript components, you'll need to install the popper.js and jquery packages and include them in your JavaScript file.

1 like

Please or to participate in this conversation.