时间戳

首页 > 解决方案 > Vue SFC / vue-loader / webpack 样式包含订单

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

问题描述

我有一个 vue/sfc/webpack/vue-loader 应用程序，我直接在 SFC 中使用引导程序（通过“导入”）和组件样式。现在 vue-loader 总是在组件样式之后包含引导程序，所以我不能正确覆盖/级联引导程序。

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

应用程序.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>

标签： javascriptwebpackvue.jsvuejs2vue-loader

解决方案

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

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

推荐阅读