淺析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深度作用選擇官網參考