CSS модули

требуется версия 9.8.0 или выше

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

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

Просто добавьте атрибут module к тегу <style>:

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

Это включит режим CSS-модулей в css-loader, и полученный индентификатор объекта класса будет внедрен в компонент как вычисляемое свойство с именем $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)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // идентификатор генерируется на основе имени файла и className.
  }
}
</script>

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

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

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

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

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

Настройка параметров css-loader

CSS-модули обрабатываются с помощью css-loader. При использовании <style module> настройки css-loader по умолчанию будут такими:

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

Вы можете использовать в vue-loader опцию cssModules чтобы добавить дополнительные параметры для css-loader:

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