vue修改element-ui的默认的class

ziyue75752025-10-10 18:56

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

依赖版本

json 复制代码

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

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

css 复制代码

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

依赖版本

json 复制代码

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

element-ui的css需要添加:root

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

css 复制代码

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

有的版本这个可用

css 复制代码

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

css 复制代码

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

css 复制代码

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