CSS Modules
CSS Modules?是一個流行的，用于模塊化和組合 CSS 的系統(tǒng)。vue-loader?提供了與 CSS Modules 的一流集成，可以作為模擬 scoped CSS 的替代方案。
#用法
首先，CSS Modules 必須通過向?css-loader?傳入?modules: true?來開啟：
// webpack.config.js{module:{rules:[// ... 其它規(guī)則省略{test:/\.css$/,use:['vue-style-loader',{loader:'css-loader',options:{// 開啟 CSS Modulesmodules:true,// 自定義生成的類名localIdentName:'[local]_[hash:base64:8]'}}]}]}}
然后在你的?<style>?上添加?module?特性：
<style module>
.red{color:red;}
.bold{font-weight:bold;}
</style>
這個?module?特性指引 Vue Loader 作為名為?$style?的計(jì)算屬性，向組件注入 CSS Modules 局部對象。然后你就可以在模板中通過一個動態(tài)類綁定來使用它了：
<template><p :class="$style.red">This should be red</p></template>
因?yàn)檫@是一個計(jì)算屬性，所以它也支持?:class?的對象/數(shù)組語法：
<template><div><p:class="{ [$style.red]: isRed }">Am I red?</p><p:class="[$style.red, $style.bold]">Red and bold</p></div></template>
你也可以通過 JavaScript 訪問到它：
<script>exportdefault{created(){console.log(this.$style.red)// -> "red_1VyoJ-uZ"http:// 一個基于文件名和類名生成的標(biāo)識符}}</script>
你可以查閱?CSS Modules 規(guī)范了解更多細(xì)節(jié)，諸如?global exceptions?和?composition?等。
#可選用法
如果你只想在某些 Vue 組件中使用 CSS Modules，你可以使用?oneOf?規(guī)則并在?resourceQuery?字符串中檢查?module?字符串：
// 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']}]}
#和預(yù)處理器配合使用
CSS Modules 可以與其它預(yù)處理器一起使用：
// webpack.config.js -> module.rules{test:/\.scss$/,use:['vue-style-loader',{loader:'css-loader',options:{modules:true}},'sass-loader']}
#自定義的注入名稱
在?.vue?中你可以定義不止一個?<style>，為了避免被覆蓋，你可以通過設(shè)置?module?屬性來為它們定義注入后計(jì)算屬性的名稱。
<style module="a">/* 注入標(biāo)識符 a */</style>
<style module="b">/* 注入標(biāo)識符 b */</style>
