Bootstrap-Vue CSS compilation in Laravel Mix

4
votes

I'm using Laravel 5.6, Laravel Mix 2.0, and Bootstrap-Vue 2.0.0-rc.1.

Trying to find a way to configure Laravel Mix to include Bootstrap-Vue's CSS into my app.css file and prevent Bootstrap-Vue from including <style> tags into the page <head>.

I saw this note in the package docs but still not sure how to use this properly:

Note: requires webpack configuration to load css files (official guide)

2
laravelwebpackvue.jslaravel-mixbootstrap-vue

2 Answers

2
votes

Finally, found a solution - ExtractTextPlugin.

let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

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

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  }
});

Reference: https://github.com/JeffreyWay/laravel-mix/issues/1589

1
votes

Install:

  1. npm i bootstrap-vue
  2. npm install --save-dev style-loader css-loader

Use:

edit resources/js/app.js to:

  1. import Vue from 'vue'

  2. import BootstrapVue from 'bootstrap-vue'

  3. Vue.use(BootstrapVue)

edit resources/sass/app.scss to:

  1. Import the styles:
    • import '~bootstrap/dist/css/bootstrap.css'
    • import '~bootstrap-vue/dist/bootstrap-vue.css'

Make sure the app.js and app.css are included in the blade(view) that is acting as the container for your vue. See: https://bootstrap-vue.js.org/docs/