No post anterior, mostrei como extrair o css de compoentes VueJS para um arquivo separado. Agora, este post vai mostrar como usar arquivos CSS externos nos Vue Components.
Você com certeza, além de escrever boa parte do CSS do seu site/aplicação, usa algo externo, seja uma biblioteca ou um framework. Vamos ver então, como incluí-los nos nossos projetos.

Extract Text Plugin

Com um projeto VueJS rodando, (se você não sabe como, dá uma olhada aqui!), teremos também que usar o Extract Text Plugin, que igualmente vai extrair o conteúdo do nosso arquivo externo.
Vamos instalá-lo pelo npm:

$ npm install extract-text-webpack-plugin --save-dev

Além de utilizar o vue-loader e o plugin Extract Text Plugin em conjunto para extrair o CSS dos componentes e criar um arquivo separado com nossos estilos, vamos usar também um loader module que vai extrair o CSS de arquivos externos e concatenar com os dos nossos componentes. Como dito, eles podem vir de um arquivo, biblioteca ou framework que eventualmente você use.

A configuração do webpack.config.js fica assim então:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  // ... outras configurações
  module: {
    loaders: [
      // ... outras configurações
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css-loader')
      }
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css')
    }
  },
  plugins: [
      new ExtractTextPlugin('styles.css')
  ]
}

Para que possamos testar isso, vamos criar um arquivo CSS de exemplo, app.css, e colocá-lo na pasta src/. Não esquecendo que temos que fazer o import desse arquivo na nossa aplicação, preferencialmente no App.vue, dentro da tag <script> :

Com isso já estamos gerando um arquivo separado com os estilos dos componentes e com o conteúdo do nosso arquivo externo, na pasta dist/. Não podemos esquecer de referenciar o arquivo CSS gerado, styles.css, no index.html desta maneira: <link rel="stylesheet" href="dist/styles.css">

Usando Pre-Processors

Aqui, como no post anterior, também podemos utilizar pré-processsadores na escrita do nosso CSS.
Estou utilizando o Stylus, mas você pode facilmente encontrar os loaders webpack de SASS ou LESS no npm.
A instalação do stylus e do stylus-loader é a seguinte:

$ npm install stylus stylus-loader --save-dev

Lembrando que temos que adicionar os loaders do pré-processsador escolhido no webpack.config.js.

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  // ... outras configurações
  module: {
    loaders: [
      // ... outras configurações
      {
        test: /\.styl$/,
        loader: 'style-loader!css-loader!stylus-loader'
      }
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css'),
      stylus: ExtractTextPlugin.extract('css!stylus')
    }
  },
  plugins: [
      new ExtractTextPlugin('styles.css')
  ]
}

Então, no nosso componente principal, App.vue, é só dar um @import, dentro da tag <style>, do arquivo externo que queremos utilizar:

Lembrando de colocar também o atributo lang com a valor stylus na tag <style lang="stylus">.

Se você quiser usar arquivos específicos em cada um dos seus componentes, é só dar o @import dentro de cada um deles.

Podemos conferir se o arquivo de saída está gerando corretamente os estilos.
É só roda no terminal o comando de build:

$ npm run build

A partir daqui, já estamos habilitados a incluir aquela biblioteca ou framework que usamos no dia a dia :)

Dica - Hot Reload CSS

O CSS não está configurado para responder ao hot reload, que é o sistema que verifica se há modificações na nossa aplicação e as atualiza no browser. Porém, podemos contornar isso facilmente.

Primeiro, criamos um arquivo javascript, por exemplo stylus.js, preferencialmente na pasta src/ e nele fazemos o import do nosso arquivo CSS base:

import base from './stylus/base.styl'

E no webpack.config.js colocamos o caminho para o arquivo na propriedade entry no módulo que o webpack está exportando:

module.exports = {
  entry: ['./src/main.js', './src/stylus.js']
  ... // outras configurações
}

Para testar é só rodar a aplicação e fazer alguma alteração no CSS:

$ npm run dev

Conclusão

Vimos como extrair o CSS de arquivos externos, fazendo com que sejam incluídos, junto com os estilos dos nossos componentes Vue, num arquivo separado. Além disso, tivemos a dica de como adicionar o CSS ao hot reload da aplicação, que agiliza e muito na hora do desenvolvimento.

Espero que ter ajudado.
Se você tiver algum feedback ou realiza essas tarefas de outro modo, deixa aí nos comentários. :)

Um abraço.