CODEWITHSUNDEEP
twitter-bootstraplaravel
user9133911
user9133911

Reputation:

how to properly setup laravel with bootstrap 4 (sass)

I have a doubt relative to what is the correct way to use bootstrap 4 with sass and laravel? Its equal just donwload the source files and put them in the public folder or it is better use npm?

And for each case what is the properly process to configure the bootstrap with laravel?

For the case of just download the source files we can create for example a bootstrap folder inside /public/css/ and paste there the sass files that are in the source files folder? But then how to import the css in the html file?

And for the case of using npm, do you know some tutorial that works? It appears there are many ways but there is some recommended process for this that works? I use the command on the project folder npm install [email protected] then change in bootstrap.js "bootstrap-sass" to "bootstrap" then in app.scss I change the 3rd import to "@import "node_modules/bootstrap/scss/bootstrap". I dont know if this process is correct, but if it is, now to edit the layout, the bootstrap css files we should do that in the bootstrap folder inside node_modules? Or we should copy that bootstrap folder to the public folder or something?

Upvotes: 3

Views: 1551

Answers (1)

Souljacker
Souljacker

Reputation: 595

Here's how I do it

First, get rid of what you won't use anymore

yarn remove bootstrap-sass

Then install what you WILL need

yarn add [email protected] popper.js

Now open resources/assets/bootstrap.js (nothing to do with the Bootstrap we're talking about)

Look for

require('bootstrap-sass');

Substitute it for

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

Then go to resources/assets/sass/app.scss

Look for 

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

And substitute it for

@import "~bootstrap/dist/css/bootstrap";

That's it!

You should be able to run yarn run dev or yarn run watch and see changes taking effect.

Upvotes: 2

Related Questions