浅析deep深度选择器

1、浅析deep深度选择器

深度选择器不是只有在less和scss中使用。

用到element-ui，里面的表单input,想给input加样式 ,我是这样写的

<el-form-item>
    <el-input v-model="loginForm.password" placeholder="password" class="login-input">       </el-input>
</el-form-item>

样式class="login-input"并没有加在input上，而是加在了el-form-item上面，怎么解决上面的问题呢？想到了深度选择期，/deep/,和>>> ,但是在vue-cli3上会报错，并没有生效

 //报错
 /deep/.login-input  input {
     padding:0 15px 0px 30px;
 }

解决要下载

npm install -D vue-loader

//配置 vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

使用 ::v-deep，这里用/deep/还是不行，有时间来研究下

 ::v-deep .login-input  input {
     padding:0 15px 0px 30px;
 }

用/deep/的解决方案

vue-loader自己的sass-loader依赖，版本为 ^6.0.7

npm i -D sass-loader@^6.0.7

重启服务就好了，但是>>>还是不能用

参考vue-cli官网配置

vue-loader深度作用选择官网参考