# CSS модули

CSS модули — это популярная система для модульности и компоновки CSS. vue-loader предоставляет первоклассную интеграцию с CSS модулями как возможную альтернативу эмулируемого локального (scoped) CSS.

# Использование

Во-первых, CSS модули нужно явно включить, передав опцию modules: true в css-loader:

// webpack.config.js
{
  module: {
    rules: [
      // ... другие правила опущены
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // включаем CSS модули
              modules: true,
              // настраиваем генерируемое имя класса
              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">
    Текст должен быть красным
  </p>
</template>

Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в :class:

<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)
    // -> "red_1VyoJ-uZ"
    // идентификатор генерируется на основе имени файла и className.
  }
}
</script>

Обратитесь к спецификации CSS-модулей для получения информации о глобальных исключениях и композиции.

# Опциональное использование

Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило oneOf и проверять наличие строки module внутри resourceQuery:

// 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 модули могут быть использованы вместе с другими пре-процессорами:

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

# Указание имени внедряемого модуля

У вас может быть несколько тегов <style> в одном компоненте *.vue. Во избежание перезаписи внедряемых стилей вы можете указать имя внедряемого вычисляемого свойства в значении атрибута module:

<style module="a">
  /* идентификатор будет внедрён как a */
</style>

<style module="b">
  /* идентификатор будет внедрён как b */
</style>