ui框架的样式穿透

时间 2019-11-21

标签框架样式穿透繁體版

原文原文链接

以前作项目的时候有遇到过该elementui的默认样式，后来由于需求不须要了就没尝试修改，最近学习并尝试了一下css

个人测试框架使用的element ui框架vue

在将element框架集成到vue里面以后（这个很简单，百度不少的）node

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

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

1.下载资源包npm

npm i node-sass sass-loader -D sass

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>