Vue SFC / vue-loader / webpack 样式包含订单答案

【问题标题】：Vue SFC / vue-loader / webpack style include orderVue SFC / vue-loader / webpack 样式包含订单
【发布时间】：2018-07-02 19:14:55
【问题描述】：

我有一个 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'

组件.vue

<style>

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

</style>

【问题讨论】：

嗨，你在使用 webpack extractTextPlugin 插件吗？
@MazinoSUkah 不，我不使用它。我检查了 github 页面，但没有看到这如何帮助解决订单问题。我错过了什么吗？

标签： javascript webpack vue.js vuejs2 vue-loader

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：