Vue風格指南中介紹了單文件組件中的Style是必須要有作用域的，否則組件之間可能相互影響，造成難以調試。
在Vue Loader Scope CSS和Vue Loader CSS Modules兩節中介紹了Vue實現CSS模塊化的兩種方式。
下面對scoped和CSS Modules兩種方式分別進行介紹，然而這兩種方式均非最佳實踐。
一、scoped
使用scoped會為組件中HTML樹的每個元素都添加data-xxxx屬性，其中xxxx是哈希值。轉換之后的CSS變成
mySelector[data-xxxx]{
....
}
scoped的缺點是很多的：
- 低效。scoped實現方式是為每個元素添加data-xxxx屬性，這會造成CSS選擇器變得復雜，造成DOM樹冗余，不利於瀏覽器快速渲染。
二、使用CSS Modules
使用scoped比較簡單，使用modules需要改三個地方。
（1）在webpack中開啟CSS的modules選項
最簡單的配置如下所示：
// webpack.config.js
{
module: {
rules: [
// ... 其它規則省略
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// 開啟 CSS Modules
modules: true,
// 自定義生成的類名
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
但是，以上這個配置是有問題的：它對全部css都應用modules，而我們只想在vue組件中使用modules。當使用Element時，引用Element自帶的CSS之后會發現不生效。這時，應該采用如下配置：
// webpack.config.js -> module.rules
{
test: /\.css$/,
oneOf: [
// 這里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:5]'
}
}
]
},
// 這里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
'vue-style-loader',
'css-loader'
]
}
]
}
（2）在Vue組件中的template部分
<template>
<p :class="$style.red">
This should be red
</p>
</template>
（3）在Vue組件中的style部分
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
CSS Modules總結
我們的目的是讓組件內部的CSS樣式不污染全局。
Vue中CSS Module的寫法缺點太多，令人難以忍受：
- 寫起來復雜，每個class都需要帶上
$style，實際上這個過程可以自定義函數來實現，完全不需要使用CSS Modules - 可讀性差，代碼長度變長，
$style使得代碼冗余很多
三、最佳實踐
最佳實踐包括三方面：
- 使用less
- 組件的根元素設置為一個特殊的class
- style塊中的內容形如
.someComponent{
...
}
這種方式寫起來簡潔，實現也簡單，是一種非常完美的寫法。