Vue SFC / vue-loader / webpack 样式包含顺序

Question

我有一个 vue/sfc/webpack/vue-loader 应用程序，我在其中直接在 SFC 中使用 bootstrap（通过 'import'）和组件样式。现在 vue-loader 总是在组件样式之后包含 bootstrap 所以我不能正确地 overwrite/cascade over bootstrap.

我尝试确定组件样式的范围，并且以某种方式起作用，但 bootstrap 仍然包含在它之后。按预期工作？

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>

Answer 1

不是真正的答案，但我的解决方案是：用 https://parceljs.org/ 替换 webpack 开箱即用（大部分）。

Answer 2

导入顺序很重要。先导入bootstrap.css：

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

Vue SFC / vue-loader / webpack 样式包含顺序

Vue SFC / vue-loader / webpack style include order

javascript

webpack

vue.js

vue-loader

vuejs2