style中加了scoped无法更改element ui样式解决办法

第一种方法

原因：scoped 
解决方法：去掉scoped 

注意：此时该样式会污染全局样式，可以把它放在公共的css里面 
为了不让所有的 el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput 

第二种方法

这不去掉scoped 的情况下

在全局样式中覆盖，这种解法，有弊端，可能会污染全局样式。为了不污染全局样式，也可单独加个类名

比如在引用全局样式前引用element ui的样式

第三种

样式放到app.vue里面 或者入口文件 index.vue ，样式就生效了 为了不污染其他页面样式，可单独加个类名

 

第四种

使用深度作用选择器，可以通过vue-loader提供的新写法  vue-loader 写法如下（先安装，在使用）：

<style scoped
>

.a >>> .b { /* ... */ }
</style>
某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别名，>>>并且完全相同。

<style scoped lang="scss">
　　.form {
　　　　background-color: #fff;
　　　　/deep/ .list{
　　　　　　font-size: 18px;
　　　　}
　　}
</style>

sass注意要用 /deep/ ,而无法使用 >>> 这个符号。

通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式 。

第五种

<style scoped> with <style>
也许你遇到过这种情况，需要修改某一个ui框架的默认样式，但是在scoped的style块中修改不成功。不得不将style块的scoped属性拿掉，或者将这个要改变的样式放进全局样式里再在main.js中导入，或者直接将样式定义在App.vue里面。这些都是可行的，但是要注意命名空间要是正确的，不然是找不到样式的。
这里提供另一种方法。其实在vue的SFC中，是允许多个style块的。你可以像下面这样使用：

?

<style scoped lang="scss">

.order-detail {

// put your local style here

}

</style>

<style>

.mint-button{

// put your global style here if you want to change the lib's style

}

</style>　　

scss文件中使用深度选择器/deep/报错 Expected selector解决方法

记得sass中使用/deep/没问题，但是在scss中使用/deep/报错了。

找到vue官网关于深度选择器是这样说的：

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

于是用 ::v-deep 就可以了

 

 变成