CSS Modules

需要 ^9.8.0 以上版本

CSS Modules是一个流行的模块化和组合CSS的系统。 vue-loader提供了将css Modules作为css作用域的一流集成。

用法

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

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

这将打开css-loader的CSS Modules模式，并且将生成的类标识符对象注入到组件中作为名为$ style的计算属性。 你可以在模板中使用它与动态类绑定：

<template>
  <p :class="$style.red">
    这里应当是红色的
  </p>
</template>

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

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      我是红色的？
    </p>
    <p :class="[$style.red, $style.bold]">
      红色的、加粗的
    </p>
  </div>
</template>

你也可以从JavaScript访问它：

<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // 基于filename和className生成的标识符。
  }
}
</script>

参考CSS Modules规格了解模式详细信息，如全局异常和composition。

自定义注入名称

你可以在一个* .vue组件中有多个<style>标签。为了避免注入的样式彼此覆盖，可以通过给module属性一个值来定制注入的计算属性的名称：

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

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

配置 css-loader 查询

CSS Modules 通过css-loader进行处理。 使用<style module>，css-loader的默认查询是：

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

您可以使用vue-loader的cssModules选项为css-loader提供其他查询选项：

// webpack 1
vue: {
  cssModules: {
    // overwrite local ident name
    localIdentName: '[path][name]---[local]---[hash:base64:5]',
    // enable camelCase
    camelCase: true
  }
}

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