• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

230
Views
¿Cómo agregar estilos SCSS a un proyecto React?

Estoy empezando a aprender React (tengo algunos conocimientos de JavaScript, ya que también estoy aprendiendo esto) y estoy construyendo mi primer proyecto. Me gustaría saber cómo agregar estilos a mi primer proyecto React, usando CSS/SCSS ya que tengo algunos conocimientos y comprensión de mis proyectos de aprendizaje html, CSS/SCSS.

¿Cómo agrega SCSS a su proyecto React?

over 3 years ago · Santiago Trujillo
6 answers
Answer question

0

Si está utilizando create-react-app, simplemente agregue sass como una dependencia de desarrollo.

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

Luego simplemente reemplace/cambie el nombre de todos los archivos CSS y las importaciones correspondientes a *.scss en lugar de *.css

over 3 years ago · Santiago Trujillo Report

0

La forma de usar scss depende un poco de su entorno de desarrollo React. Para los principiantes, React recomienda usar Create React App que, según ellos, es "un entorno cómodo para aprender React y es la mejor manera de comenzar a crear una nueva aplicación de una sola página en React". Puede leer más sobre esto en https://reactjs.org/docs/create-a-new-react-app.html . Para crear su aplicación, simplemente escriba lo siguiente en la línea de comando:

 npx create-react-app my-app

Después de eso, React configura un entorno de desarrollo completo con archivos css que puede editar para diseñar su código.

Si desea continuar usando create-react-app (a veces llamada CRA) y usar scss, puede instalar la biblioteca Dart Sass escribiendo:

 npm i sass

(Tenga en cuenta que node-sass está en desuso y estamos usando Dart Sass en su lugar)
Para obtener una explicación completa sobre cómo usar node-sass y CRA juntos, consulte "¿Cómo usar SASS en la aplicación Create React?": https://www.robinwieruch.de/create-react-app-with-sass-support

Una vez que pase de CRA, puede jugar con su propio webpack.config.js, que también se puede configurar para compilar e importar archivos SCSS. Pero si recién está comenzando con React, es posible que desee dejar de jugar con su webpack.config.js para más adelante y quedarse con CRA.

over 3 years ago · Santiago Trujillo Report

0

Si usa create-react-app entonces:

1) Primero instale la dependencia de sass usando npm:

npm install sass

2) Importe su archivo sass a su archivo componentName.js

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

over 3 years ago · Santiago Trujillo Report

0

Los pasos para agregar Sass a Create React App son:

  1. Instalar nodo-sass:

    npm instalar nodo-sass

    o

    hilo agregar nodo-sass

  2. Convierta sus archivos .css a .scss

  3. Importe sus archivos .scss en sus componentes React como App.js

over 3 years ago · Santiago Trujillo Report

0

primero, instale sass en su proyecto. Luego impórtelo a su componente.

instalar sass:

  1. Usando npm: npm install sass
  2. Usando hilo yarn add sass

importar en su componente: import example from './example.scss'

over 3 years ago · Santiago Trujillo Report

0

No tienes que. Ya está integrado con npx create-react-app

over 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error