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)
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
Install:
Use:
edit resources/js/app.js to:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
edit resources/sass/app.scss to:
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/
<style> tags into my compiled CSS file.
<style> tags inserted into <head> by BootstrapVue.
<link rel="stylesheet" href="path/to/stylesheet"> instead of <style>/** shit tons of injected css **/</style>?app.css file already (the resulting file with all the CSS compiled by Laravel Mix). I just want all these inline styles from the Bootstrap-Vue components to be included in the app.css instead of bloating the page size.