Vue Loader

# CSS 模块

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

# 用法

首先，必须通过将 modules: true 传递给 css-loader 来启用 CSS 模块

// webpack.config.js
{
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

然后，将 module 属性添加到您的 <style> 中

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

module 属性指示 Vue Loader 将 CSS 模块本地对象注入到组件中，作为具有名称 $style 的计算属性。然后，您可以在模板中使用动态类绑定来使用它

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

有关更多详细信息，例如 全局异常 和 组合，请参阅 CSS 模块规范。

# 选择性使用

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

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  oneOf: [
    // this matches `<style module>`
    {
      resourceQuery: /module/,
      use: [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]_[hash:base64:5]'
          }
        }
      ]
    },
    // this matches plain `<style>` or `<style scoped>`
    {
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

# 与预处理器一起使用

CSS 模块可以与其他预处理器一起使用

// 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">
  /* identifiers injected as a */
</style>

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

← 热重载 →