1. Nesta última parte é feita a alteração dos Styles para usar o SASS em vez do CSS, sendo necessário a instalação da biblioteca sass-loader pelo terminal do Visual Studio Code com o comando yarn add sass-loader e após concluir, fazer também a instalação da biblioteca node-sass com o comando yarn add node-sass
  2. Alterar o arquivo webpack.config.js incluindo 'sass-loader' na linha 35 e acrescentar scss na linha 33:

Untitled

  1. Caso queira usar CSS deixar a configuração como estava: test: /\.css$/, assim não carrega o sass-loader
  2. Sendo a extensão scss$ é ****para usar o sass com chaves, tem a a extensão sass$ que não utiliza chaves: test: /\.sass$/,
  3. Alterar o nome do arquivo global.css para global.scss
  4. Alterar também o arquivo App.jsx na linha 1 trocando .css para .scss

Untitled

  1. Executar o comando yarn dev no terminal do Visual Studio Code
  2. Sendo possível visualizar a atualização da página no localhost 8080, o Elements também está carregando corretamente o style e o arquivo global scss:

Untitled

Untitled

Untitled

  1. Após isso é possível já utilizar o sass, podendo por exemplo fazer a união de elementos tags incluindo dentro da tag body as instruções da tag h1 nas linhas 12 até 14 no arquivo global. scss:

Untitled

  1. Após isso é possível visualizar a atualização da página no localhost 8080:

Untitled

  1. Caso altere o valor da fonte-size na tag h1 no arquivo global. scss a página ****no localhost 8080 é atualizada automaticamente:

Untitled

Untitled