在單頁.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>