这是一个最好的时代，也是一个最坏的时代。——狄更斯

前段时间用elementUI进行开发，发现样式修改不了

这里一个简单的表格页面

<template>
  <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>
</template>

<script>
export default {
  components: {},
  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 弄",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style scoped>
</style>

页面效果

image-20201107112849467

我们假设需要给表格的cell加个背景颜色

如果我们试着直接加

image-20201107115306679

image-20201107115218455

image-20201107115239717

最后发现都是徒劳，样式根本没有加上

所以这里我们安装less

注意一定要在项目没运行的时候安装

cnpm i less --save-dev
cnpm i -s less-loader
cnpm i -g less

安装到这可能遇到点问题是什么呢？看图

处理方案就是降低less-loader版本,我的vue版本是2.5.2，
先卸载最新的版本

yarn remove less-loader  或者 npm uninstall less-loader 或者 cnpm uninstall less-loader

然后安装less-loader

yarn add less-loader@5.0.0 或者 npm install less-loader@5.0.0 -D

然后在vue.config.js中加上配置

module.exports = {
    devServer: {
        port: 3000
    },
    css: {
        loaderOptions: {
            less: {
                modifyVars: {},
                javascriptEnabled: true,
            }
        }
    },
}

最后在style标签加上lang="less"以及在类选择器前方加个/deep/

<style scoped lang="less">
/deep/ .cell {
  background-color: #9a9a9a;
  color: #ffffff;
}
</style>

image-20201107115519806

可以看到我们的样式成功穿透

image-20201107115614584