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

Question

我有一个 vue/sfc/webpack/vue-loader 应用程序，我直接在 SFC 中使用 Bootstrap (通过“导入”)和组件样式。现在，vue-loader 总是在组件样式之后包含 Bootstrap ，因此我无法正确覆盖/级联 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'

组件.vue

<style>

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

</style>

Answer 1

进口订单很重要。首先导入 bootstrap.css:

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