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]'}}]}]}}

然后在你的 <style> 上添加 module 特性：

<style module>

.red{color:red;}

.bold{font-weight:bold;}

</style>

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

<template><p :class="$style.red">This should be red</p></template>

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

<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"// 一个基于文件名和类名生成的标识符}}</script>

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

#可选用法

如果你只想在某些 Vue 组件中使用 CSS Modules，你可以使用 oneOf 规则并在 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']}]}

#和预处理器配合使用

CSS Modules 可以与其它预处理器一起使用：

// webpack.config.js -> module.rules{test:/\.scss$/,use:['vue-style-loader',{loader:'css-loader',options:{modules:true}},'sass-loader']}

#自定义的注入名称

在 .vue 中你可以定义不止一个 <style>，为了避免被覆盖，你可以通过设置 module 属性来为它们定义注入后计算属性的名称。

<style module="a">/* 注入标识符 a */</style>

<style module="b">/* 注入标识符 b */</style>