Best Practice for VueJs using laravel mix and placement app.js with bootstrap and app.css from sass

Question

I'm trying to figure out the best practice for this, I have bootstrap loaded into my app.js using the line

import 'bootstrap/dist/css/bootstrap.css';

The problem is that my app.js is at the bottom of the page and my placed app.css, generated from sass, is in the header, so bootstrap is taking over all the styles I wrote to over-ride bootstrap.

In the head of my laravel layout template:

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

and in the footer:

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

What's the best practice? Should I somehow be mixing in the bootstrap css using sass - I tried finding that as a solution with no luck. Or maybe I pull my custom css into my js as well - I tried that, but the bootstrap file I merge in comes from my source repository and the app.css is being generated into the public directory.

I'm obviously a bit new to this, and I'm just trying to sort out the best way, working with Laravel, mix and VueJs.

Here's my mix file:

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

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

mix.autoload({
  jquery: ['$', 'window.jQuery', 'jQuery'],
  'popper.js/dist/umd/popper.js': ['Popper']
})

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],   
    'moment': ['moment','window.moment'],   
  })

What is the right way to do this, so that my css is after, and therefore takes precedence over, the bootstrap css?

Just add @import '~bootstrap/scss/bootstrap'; to the top of resources/sass/app.scss. No need to import the CSS in the JavaScript side that way. — ceejayoz

utdev utdev · Accepted Answer · 2019-01-07T19:36:09

You simply have to do following in your app.scss file:

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

That will load the bootstrap style dependencies which you immidiatly can use, if you want to overwrite some styling you can create a new file and import that to your scss file under the main bootstrap file.

For instance you create this file inside resources/sass/_custom_bootstrap.scss

now you import that in your app.scss like this:

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


// custom
@import 'custom_bootstrap';
...

You don't have to add the file in your mix since app.scss is already in the mix file and compiles.

Best Practice for VueJs using laravel mix and placement app.js with bootstrap and app.css from sass

1 Answers