ui框架的样式穿透

之前做项目的时候有遇到过该elementui的默认样式，后来因为需求不需要了就没尝试修改，最近学习并尝试了一下

我的测试框架使用的element ui框架

在将element框架集成到vue里面之后（这个很简单，百度很多的）

使用两种方法样式穿透：sass和stylus

首先是配置sass和stylus的环境，

1.下载资源包

npm i node-sass sass-loader -D  

npm install stylus stylus-loader --save

2.添加webpack里面的配置(scss需要)

  {
        test: /.scss$/,
        loaders: ['style', 'css', 'sass']
      },

//使用 lang="scss"引入
<style  scoped lang="scss">
//scss的样式穿透需要/deep/
  .el-row /deep/ .el-button--primary {
    background-color: #eee;
  }
 </style>

3.如果使用stylus穿透的话

<style  scoped lang="stylus">
  .el-row >>> .el-button--primary {
    background-color: #000;
  }
 </style>