CODEWITHSUNDEEP
laraveltwitter-bootstrap
user10676579
user10676579

Reputation: 113

configure bootstrap with laravel

Im new to web development I just installed laravel and I want to use bootstrap 4 sass but I dont know if i understood what should be the correct workflow.

It seems that laravel already includes bootstrap 4 in the boostrap.js file. So the bootstrap components already can be used in the blade files, however do you know how to properly configure this so that not all components are included? For now the app.scss file looks like:

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

But in "@import '~bootstrap/scss/bootstrap';" it shows an error "cannot resolve directory 'scss'".

Also if we need to add custom css or customize the bootstrap components how it should be done? We should create a "style.scss" file for example inside the sass folder and customize the bootstrap components there? Or we should customize the bootstrap components in the bootstrap components scss files?

And also the js/app.js file already has a lot of js code by default maybe because bootstrap includes also jQuery and this is jQuery code? But is necessary to include all this js code?

Upvotes: 1

Views: 1087

Answers (1)

Ali Sharifi Neyestani
Ali Sharifi Neyestani

Reputation: 4388

The best way is to use Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. Through simple method chaining, you can fluently define your asset pipeline. For example:

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

webpack use a method nammed Tree Shaking Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. So you do not worry about Unnecessary codes

also If you wish to customize the file name of the compiled CSS, you may pass a full file path as the second argument to the less method:

mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

also Laravel have a preset command that gives you the ability to change frontend scaffolding or even delete it. 

php artisan preset bootstrap4
yarn && yarn dev

Please read more here

Upvotes: 1

Related Questions