PostCSS

Qualquer saída CSS processada por vue-loader é canalizada através de PostCSS para escrever o escopo CSS. Você também pode adicionar plugins PostCSS personalizado ao processador, por exemplo autoprefixer ou CSSNext.

Usando um Arquivo de Configuração

A partir da versão 11.0, vue-loader suporta o carregamento automático dos mesmo arquivos de configuração do PostCss suportados por postcss-loader:

  • postcss.config.js
  • .postcssrc
  • Opção postcss em package.json

O uso de um arquivo de configuração permite que você compartilhe a mesma configuração entre seus arquivos CSS normais processados por postcss-loader e os arquivos CSS dentro de arquivos *.vue, isto é o recomendado.

Opções em Linha

Como alternativa, você pode especificar configurações PostCSS especificamente para arquivos *.vue usando a opção postcss para vue-loader.

Exemplo de uso no webpack 1.x:

// webpack.config.js
module.exports = {
  // outras configurações...
  vue: {
    // use plugins personalizado de PostCSS
    postcss: [require('postcss-cssnext')()]
  }
}

Para webpack 2.x:

// webpack.config.js
module.exports = {
  // outras opções...
  module: {
    // `module.rules` é o mesmo que `module.loaders` em 1.x
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        // opções vue-loader options vai aqui
        options: {
          // ...
          postcss: [require('postcss-cssnext')()]
        }
      }
    ]
  }
}

Além de fornecer uma coleção de plugins, a opção de postcss também aceita:

  • Uma função que retorna uma coleção de plugins:

  • Um objeto que contém opções para ser passado para o processador PostCSS. Isto é útil quando você está usando projetos com PostCSS que depende de analisadores/stringifiers personalizados:

    postcss: {
      plugins: [...], // Lista de Plugins
      options: {
        parser: sugarss // Use o analisador sugarss
      }
    }
    

results matching ""

    No results matching ""