样式穿透

2020-11-07

前端

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

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

这里一个简单的表格页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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

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

1
2
3
cnpm i less --save-dev
cnpm i -s less-loader
cnpm i -g less

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

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
devServer: {
port: 3000
},
css: {
loaderOptions: {
less: {
modifyVars: {},
javascriptEnabled: true,
}
}
},
}

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

1
2
3
4
5
6
<style scoped lang="less">
/deep/ .cell {
background-color: #9a9a9a;
color: #ffffff;
}
</style>

image-20201107115519806

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

image-20201107115614584