CSS Modules 是 Vue 的一種 CSS 寫法。通過使用自動化工具來處理 CSS 類名，可以實現(xiàn) CSS 語法上的模塊化、基礎組件的封裝以及單文件組件的樣式隔離等功能。 Vue 為 CSS Modules 的使用提供了良好的支持，對于使用 Vue 的前端開發(fā)者來說，這是一項非常實用的技術。

怎么使用 CSS Modules 呢？首先，在 Vue 項目中，需要使用 vue-loader，它可以方便地處理模塊化的 CSS，而且可以在生產環(huán)境中進行代碼分割和壓縮。我們可以在NPM中使用以下命令來安裝：

npm install --save-dev vue-loader

接著，在 Vue 的單文件組件中，可以使用以下方式來啟用 CSS Modules：

<template>
<!-- ... -->
</template>
<script>
export default {
// ...
<span class="title">{{ title }}</span>
// ...
}
</script>
<style module>
.title {
font-size: 16px;
color: #333;
}
</style>

在上面的代碼中，由于<style>標簽使用了module屬性，所有的 CSS 類名將默認為局部（模塊）作用域。我們不用擔心外部樣式表或者其他局部作用域的類名會影響到當前組件的樣式。

除此之外，Vue 還支持以下這種方式來設置局部作用域的 CSS：

<template>
<!-- ... -->
</template>
<script>
export default {
// ...
}
</script>
<style scoped>
.title {
font-size: 16px;
color: #333;
}
</style>

在這種方式中，<style>標簽的scoped屬性可以讓組件的樣式只作用于當前組件，不會影響到其他組件。這種方式的唯一缺點是樣式不可復用，如果需要在其他組件中使用同樣的樣式，則需要再次定義。