Search code examples
javascriptwebpackvue.jsvuejs2vue-loader

Vue SFC / vue-loader / webpack style include order

I have a vue/sfc/webpack/vue-loader application where I use bootstrap (via 'import') and component styles directly in the SFCs. Now vue-loader always includes bootstrap after the component styles so I can´t properly overwrite/cascade over bootstrap.

I tried scoping the component style and that somehow works, but bootstrap is still included after it. Working as intended?

app.js

import Vue from 'vue'
import App from './app.vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

component.vue

<style>

    input.form-control {
        border-width: 0px;
        border-bottom-width: 1px;
        width: 6rem;
        display: inline;
    }

</style>
Solution

  • Not a real answer, but my solution was: replace webpack with https://parceljs.org/ Works (mostly) out of the box.