Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

107
Vistas
¿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 4 years ago · Santiago Trujillo
6 Respuestas
Responde la pregunta

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 4 years ago · Santiago Trujillo Denunciar

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 4 years ago · Santiago Trujillo Denunciar

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 4 years ago · Santiago Trujillo Denunciar

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 4 years ago · Santiago Trujillo Denunciar

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 4 years ago · Santiago Trujillo Denunciar

0

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

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda