vue修改element-ui的默认的class

使用node-sass

若是sass使用的依赖是node-sass (容易和其他包冲突,导致npm无法启动)

依赖版本

"node-sass": "^6.0.1",
"sass-loader": "^6.0.6",
"sass-resources-loader": "^1.3.3",

element-ui的css需要添加/deep/

# 前面添加 /deep/
/deep/ .el-message-box{
  width: 200px;
}

使用sass

依赖版本

    "sass": "1.32.13",
    "sass-loader": "7.3.1",

element-ui的css需要添加:root

从上面的依赖换到这个依赖之后，其他的配置不需要修改，/deep/ 就无法用了,需要改为:root

:root .el-message-box{
  width: 200px;
}

::v-deep

有的版本这个可用

::v-deep .el-message-box{
  width: 200px;
}

使用>>>

>>> .el-message-box{
  width: 200px;
}

若是style没有设置 scoped ,貌似可以直接设置

<style>   /* style没有设置 scoped  */
/* 全局修改按钮样式 */
.el-message-box{
  width: 200px;
}
</style>