CSS Modules

需要 ^9.8.0

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

使用

在你的 <style> 上添加 module 属性：

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

这将为 css-loader 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性，你可以在你的模块中使用动态 class 绑定：

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

由于它是一个计算属性，它也适用于 :class 的 object/array 语法：

<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>
export default {
  created () {
    console.log(this.$style.red)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // an identifier generated based on filename and className.
  }
}
</script>

请参考 CSS Modules 规范了解更多诸如 global exception 和 composition 等详细信息。

自定义注入名称

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

<style module="a">
  /* identifiers injected as a */
</style>

<style module="b">
  /* identifiers injected as b */
</style>

配置 css-loader Query

CSS Modules 处理是通过 css-loader。默认 query 如下：

{
  modules: true,
  importLoaders: 1,
  localIdentName: '[hash:base64]'
}

你可以使用 vue-loader 的 cssModules 选项去为 css-loader 添加 query 配置：

module: {
  rules: [
    {
      test: '\.vue$',
      loader: 'vue-loader',
      options: {
        cssModules: {
          localIdentName: '[path][name]---[local]---[hash:base64:5]',
          camelCase: true
        }
      }
    }
  ]
}