3

在单页.vue文件中,为了保证各组件间的css样式不冲突,很可能会使用到局部css,也就是给<style>标签加上一个scoped属性(当然也可以用各种命名规则来规避这个问题)。

一开始用的时候感觉很神奇,于是看代码查资料了解了一下原理。
所谓的局部css,就是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所有html都打上一个相同的tag,最后通过css的属性选择器定位,造就了所谓的局部css。

原理都懂了,再有兴趣深究可以看一下vue-loader的源码。

下面说一个自己在开发中遇到的问题

最近项目中也在使用element-ui进行开发,有时候需要对引入的组件进行一些样式的重写调整,但仅仅是针对某一个页面而不是整体修改,在当前组件中用局部属性导致了不能重写element-ui的样式的问题。

下面是简单的例子,想修改.el-table th的样式

<style lang="css" scoped>
    .el-table th {
        background-color: #eee;
    }
</style>

但是发现并不能正常的修改样式,于是通过chrome查看元素一探究竟
发现html中只有子组件的根元素被打了tag标签而编译后的css中是最后一个属性被加了tag标签,所以自然就定位不到元素修改他的样式了

<div data-v-15ed03ea class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%;">
    <th>...<th>
</div>

<style type="text/css">
.el-table th[data-v-15ed03ea] {
    background-color: #eee;
}
</style>

既然问题的原理已经清楚了,那么接下来开始寻找解决方案,我们的目的只需要将tag打给我们要修改子组件样式的根元素就可以了

https://vue-loader.vuejs.org/en/features/scoped-css.html3 vue-loader的官方文档中也说了这个问题 所以使用 >>> 符号可以做到,但是注意vue-loader的版本要高于12.2.0 这个功能是这个版本后才具有的
https://github.com/vuejs/vue-loader/releases/tag/v12.2.0

最后上一下测试的demo

<template>
  <div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      </el-table>
      <div>
          <span>123</span>
          <p>321</p>
          <p>321</p>
      </div>

      </div>

    </template>
  <script>
  export default {
      data() {
      return {
          tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
          }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
          }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
          }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
          }]
      }
      }
  }
  </script>
  <style lang="css" scoped>
      .el-table >>> th {
          background-color: #eee;
      }
  </style>

kedaya
1.4k 声望198 粉丝

要知其然 更要知其所以然