Webpack III: Extraindo CSS do SCSS

Agora que já temos nosso SCSS funcionando, olha post anterior, precisamos lidar com mais um problema. O CSS está sendo carregado junto com o arquivo javascript, e esse não é o melhor dos setups. Na maioria dos casos na produção, vamos querer nossos arquivos CSS separados do nosso javascript, a não ser em aplicações menores. E é isso que vamos fazer agora.

Instalando o Mini CSS Extract Plugins

Para que tudo funcione do jeito que queremos, vamos instalar o mini-css-extract-plugin. Para isso, basta rodar npm install mini-css-extract-plugin --save-dev.

Feito isso, agora é bem simples, basta a gente chamar esse carinha lá no nosso código. Pra isso, vamos então mudar um pouco nosso webpack.config.js para que ele adicione esse novo plugin. As mudanças que vamos fazer são as seguintes:

1. Vamos importar o MiniCssExtractPlugin no arquivo.
2. Em plugins, vamos instanciar o plugin: new MiniCssExtractPlugin().
3. Em loaders, vamos substituir o style loader pelo loader carregado no MiniCssExtractPlugin.

Resumo, eis abaixo o arquivo config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {

  entry: './src/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }

          }],
        exclude: [path.resolve(__dirname, 'node_modules')]
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]

  },
  plugins: [
    new MiniCssExtractPlugin()
  ]

}

Com isso, o que deve acontecer é que a partir de agora, ao invés de o CSS ser injetado pelo javascript, nós teremos que importa-lo manualmente (criando uma tag link/css). E voilá, temos nosso arquivo CSS separado!

Repositório

O repositório deste post está aqui