Webpack II: trabalhando com SCSS

Depois de configurado o básico do Webpack, agora é hora de ajustarmos o nosso SCSS, para trabalharmos de forma mais fluida do que o CSS.

Se você leu o primeiro post desta série, vai saber que precisamos nos preocupar com quatro coisas: (i.) entry; (ii.) output; (iii.) loaders; (iv.) plugins.

Tudo isso vamos configurar em um arquivo próprio, o famos webpack.config.js.

Setup Inicial

Esse é o básico do setup no webpack. Veja que temos aí todos os itens de que precisamos. Temos nosso ponto de entrada, que é o ./src/app.js, temos nosso output que é a nossa pasta ./public/scripts. Também deixamos lugar para os loaders (dentro de module.rules) e para os plugins.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, '/public/scripts'),
    publicPath: '/',
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: ,
        exclude: ,
        use: {
          loader: '',
          options: {
            presets: []
          },
        },
      },
    ]
  },
  plugins: []
}

Adicionando CSS no Javascript

Duas coisas fundamental precisamos fazer para que nosso setup funcione. A primeira é importarmos o CSS no nosso arquivo de entrada. Em algum momento, no arquivo de entrada (no nosso caso, o app.js) deverá fazer a importação do arquivo .css ou .scss. Em segundo lugar, é necessário que ajustemos nosso arquivo de configuração do webpack para dizer o que fazer quando o webpack encontrar um import de css/scss dentro do arquivo .js. E é isso que vamos fazer agora. Vamos focar no trecho

Configurando o Loader

Vamos então configurar o loader. Para isso, vamos usar o module.rules dentro do objeto module.exports:

...
module: {
  rules: [
    {
      test: ,
      use: {
        loader: '',
        options: {
        },
      },
    },
  ]
},
...

Veja que então temos que configurar 2 propriedades: test e use. O test, como o nome diz serve para 'testarmos' qual tipo de arquivo que vamos querer nesse loader que vamos configurar. Ele deve ser escrito em regExp. O exclude nos diz quais arquivos excluir. Vamos então testar arquivos css e scss. Para isso a regExp /\.s?css$/ irá funcionar bem. E os loaders?

Aqui temos que ter em mente um funcionamento básico do webpack. Os loaders são chamados de trás pra frente. Dessa forma, o primeiro loader que temos que chamar é aquele que irá identificar o arquivo scss. Para isso, vamos usar o sass-loader. Ele transformará o scss em css. Depois, temos que ter um loader que consiga identificar o css: o css-loader. Por fim, temos que ter um loader que irá injetar o css que foi carregado no nosso arquivo html dentro de uma tag <style>: vamos utilizar para esse fim o style-loader.

Antes de entrarmos em nossa config, precisamos instalar os loaders:

npm install sass-loader node-sass css-loader style-loader --save-dev

Vamos então para nosso config file. Como não vamos utilizar nenhuma opção, podemos remover o item module.rules.use.options totalmente.

Nosso arquivo ficará assim:

...
rules: [
    {
      test: /\.s?css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },
...

Próximos passos

Belezinha, ficou maravilha! Mas veja que com essa config, o arquivo css (ou scss) está sendo carregado pelo javascript. Em produção o ideal seria separar um arquivo css dedicado. E é isso que vamos fazer no próximo post.

Repositório

O repositório deste post está aqui