Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

309
Visualizações
How to add SCSS styles to a React project?

I'm just starting to learn React (have some JavaScript knowledge, as I'm learning tis as well) and building my first project. I would like to know how to add styles to my first React project, using CSS/SCSS as I have some knowledge and understanding from my html, CSS/SCSS learning projects.

How do you add SCSS to your React Project?

over 4 years ago · Santiago Trujillo
6 Respostas
Responde à pergunta

0

If you are using create-react-app, just add sass as a dev dependency.

yarn add -D sass or npm install --save-dev sass

Then just replace/rename all CSS files and corresponding imports to *.scss instead of *.css

over 4 years ago · Santiago Trujillo Relatório

0

The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:

npx create-react-app my-app

After that, React sets up a full development environment with css files you can edit to style your code.

If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:

npm i sass

(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support

Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.

over 4 years ago · Santiago Trujillo Relatório

0

If using create-react-app then:

1)First install sass dependency using npm:

npm install sass

2)Import your sass file to your componentName.js file

import '../scss/FileName.scss';

over 4 years ago · Santiago Trujillo Relatório

0

The steps to add Sass to Create React App are:

  1. Install node-sass:

    npm install node-sass

    or

    yarn add node-sass

  2. Convert your .css files to .scss

  3. Import your .scss files in your React components like App.js

over 4 years ago · Santiago Trujillo Relatório

0

first, install sass in your project. Then import it into your component.

install sass:

  1. Using npm: npm install sass
  2. Using yarn yarn add sass

import in your component: import example from './example.scss'

over 4 years ago · Santiago Trujillo Relatório

0

You do not need to. It is already built-in with npx create-react-app

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda