Question

我在vue cli中遇到vue webpack脚手架的问题，关于它在dev和prod中处理样式范围的方式我有一个组件：

<div class=input-group><input class="form-control someformcontrol" ...

<style lang="sass" scoped>
.someformcontrol
    z-index:0

我的项目使用 bootstrap-sass 。

npm run dev我得到了

. someformcontrol[data-v-2929f1fc] {
    z-index: 0;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

也就是说，本地组件样式和bootstrap sass样式都被加载，但是本地样式会覆盖引导样式。

但是npm run prod我的订单被撤销了：

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
. someformcontrol[data-v-2929f1fc] {
    z-index: 0;
}

换句话说，在本地运行，我得到z-index为0，因为作用域组件样式会覆盖bootstrap sass 但是同样的事情与npm run build的顺序相反，有效的z-index比较2（效果是我无法覆盖带有npm run prod的范围组件标签中的bootstrap sass ）。我不确定在build/中要寻找什么来解决这个问题。

vue-cli webpack样式的优先级

0 个答案: