CSS Modules

CSS Modules

CSS Modules 是一个流行的，用于模块化和组合 CSS 的系统。vue-loader 提供了与 CSS Modules 的一流集成，可以作为模拟 scoped CSS 的替代方案。

#用法

首先，CSS Modules 必须通过向 css-loader 传入 modules: true 来开启：

// webpack.config.js{module:{rules:[// ... 其它规则省略{test:/\.css$/,use:['vue-style-loader',{loader:'css-loader',options:{// 开启 CSS Modulesmodules:true,// 自定义生成的类名localIdentName:'[local]_[hash:base64:8]'}}]}]}}

然后在你的 

这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了：

因为这是一个计算属性，所以它也支持 :class 的对象/数组语法：

你也可以通过 JavaScript 访问到它：

你可以查阅 CSS Modules 规范了解更多细节，诸如 global exceptions 和 composition 等。

#可选用法

如果你只想在某些 Vue 组件中使用 CSS Modules，你可以使用 oneOf 规则并在 resourceQuery 字符串中检查 module 字符串：

// webpack.config.js -> module.rules{test:/\.css$/,oneOf:[// 这里匹配 `