??最開始使用Vue的時候，是提倡并大量使用的是scoped的束亏。
<span data-v-0467f817 class="errShow">用戶名不得為空</span>
??加上 scoped 屬性的style會自動添加一個唯一的屬性 铃在。比如data-v-0467f817為組件內 CSS 指定作用域，編譯的時候 .errShow會被編譯成類似 .errShow[data-v-0467f817]碍遍。
.errShow[data-v-0467f817] {
font-size: 12px;
color: red;
}
??這種添加唯一的屬性的方法可以滿足日常組件局部css作用域的開發(fā)需求定铜，但其設計上有一定缺陷，.errShow[data-v-0467f817]并不能保證是唯一的怕敬，另外在性能上也不是很好揣炕，瀏覽器搜索.errShow[data-v-0467f817]的速度并不如.errShow，相比于這種方式东跪，CSS modules則做的更徹底畸陡，它不是添加屬性，而是直接改變類名虽填。
<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用戶名不得為空</span>
CSS Modules
CSS Modules既不是官方標準丁恭，也不是瀏覽器的特性，而是在構建步驟中對CSS類名選擇器限定作用域的一種方式（通過hash實現(xiàn)類似于命名空間的方法）斋日。類名是動態(tài)生成的牲览，唯一的，并準確對應到源文件中的各個類的樣式恶守。
用法
- 在style標簽中添加module屬性第献，表示打開CSS-loader的模塊模式跛蛋。
- 在模板中使用動態(tài)類綁定:class，并在類名前面加上'$style.'痊硕。
- 如果類名包含中劃線赊级，則使用中括號語法$style['header-tit']
也可以使用數(shù)組或對象語法。
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
<template>
<div :class="$style.bg">
<van-cell title="進度條" is-link to="/rx-progress-demo" />
<van-cell title="地址選擇" is-link to="/rx-address-picker-demo" />
<van-cell title="滑動日歷" is-link to="/rx-touch-calendar-demo" />
<van-cell title="批量調取瑞信頭像" is-link to="/rx-getPhoto-list-demo"/>
</div>
</template>
<script>
export default {
name: 'demo'
}
</script>
<style module>
.bg {
width: 100px;
height: 100px;
background-color: red;
}
</style>
配置
如果你的項目是用vue-cli搭建的岔绸，那么腳手架已經(jīng)為你配置好了理逊，直接可以使用，如果你是用webpack自己搭建的項目或想要修改默認配置盒揉，則進行下面配置晋被。
css-loader關于CSS modules的默認配置如下：
{
modules: true,
importLoaders: 1,
localIdentName: '[hash:base64]'
}
可以使用vue-loader的css Modules選項為css-loader進行自定義的配置
module: {
rules: [
{
test: '\.vue$',
loader: 'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
}
}
}
]
}
