Como Usar SCSS Com React

Você utiliza Sass ou Scss para construir seu CSS e está criando um aplicação em React mas não sabe como utilizar ele?
Usar o Sass dentro do React é muito simples e fácil de ser configurado!

Para isso, em seu terminal instale o sass:

npm install node-sass

// Ou utlizando yarn

yarn add node-sass

Pronto, agora você já está apto a utilizar arquivos Sass dentro do seu projeto!
Mas como podemos importar os estilos? Da mesma maneira que fazemos com o CSS tradicional

Criamos um arquivo .scss, nesse caso, chamaremos de estilo.scss:

$color: #000;

h1 {
  color: $color;
}

E dentro do nosso arquivo js, importamos nosso estilo:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./estilo.scss";

class App extends Component {
  render() {
    return (
      <div>
        <h1>Blog Back&Front!</h1>
        <p>Seja bem-vindo!</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Sem complicações nem dores de cabeça, simples e rápido! :)

🏡