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:

1
2
3
4
5
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:

1
2
3
4
5
$color: #000;

h1 {
color: $color;
}

E dentro do nosso arquivo js, importamos nosso estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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! :)

🏡