Question

我有一个vue / sfc / webpack / vue-loader应用程序，在其中我直接在SFC中使用引导程序（通过“导入”）和组件样式。现在，vue-loader在组件样式之后始终包含引导程序，因此我无法在引导程序上正确覆盖/层叠。

我尝试确定组件样式的范围，并且以某种方式起作用，但是引导程序仍包含在其后。按预期工作？

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

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

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

Answer 2

不是一个真正的答案，但是我的解决方案是：将https://parceljs.org/替换为webpack（通常）是开箱即用的。

Vue SFC / vue-loader / webpack样式包括订单

2 个答案: