Módulos CSS

Requer versão ^9.8.0

Módulos CSS é um sistema popula para modularização e composição de CSS. vue-loader fornece integração de alto nível com módulos CSS como uma alternativa para simular escopo CSS.

Uso

Basta adicionar o atributo module ao seu <style>;

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

Isto ativará o modo Módulo CSS para css-loader, e a classe resultante que identifica o objeto será injetada dentro do componente como uma propriedade computada com o nome $style. Você pode usá-lo em seus templates com uma ligação de classe dinâmica.

<template>
  <p :class="$style.red">
    Isto deve ser vermelho
  </p>
</template>

Uma vez que a propriedade é computada, ela também funciona com a sintaxe object/array de :class:

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Eu sou vermelho?
    </p>
    <p :class="[$style.red, $style.bold]">
      Vermelho e negrito
    </p>
  </div>
</template>

E você também pode acessá-la com JavaScript:

<script>
  export default {
    created () {
      console.log(this.$style.red)
      // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
      // identificador gerado baseado no nome do arquivo e nome da classe.
    }
  }
</script>

Consulte a especificação do Módulo CSS para detalhes como modo exceções globais e composição.

Nome de Injeção Personalizado

Você pode ter mais de uma tag <style> em um único componente *.vue. Para evitar que estilos injetados substitua um ao outro, você pode personalizar o nome da propriedade computada injetada fornecendo um valor para o atributo module:

<style module="a">
  /* identificadores injetado como a */
</style>

<style module="b">
  /* identificadores injetados como b */
</style>

Configurando consulta css-loader

Módulos CSS são processados via css-loader. Com <style module>, a consulta padrão usada para css-loader é:

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

Você pode usar as opções cssModules do vue-loader para fornecer opções de consulta adicionais para css-loader:

// webpack 1
vue: {
  cssModules: {
    // sobrescreve o localIdentName
    localIdentName: '[path][name]---[local]---[hash:base64:5]',
    // Ativa camelCase
    camelCase: true
  }
}

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