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?
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
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-appDespué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.
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';
Los pasos para agregar Sass a Create React App son:
Instalar nodo-sass:
npm instalar nodo-sass
o
hilo agregar nodo-sass
Convierta sus archivos .css a .scss
Importe sus archivos .scss en sus componentes React como App.js
primero, instale sass en su proyecto. Luego impórtelo a su componente.
instalar sass:
npm install sassyarn add sass importar en su componente: import example from './example.scss'
No tienes que. Ya está integrado con npx create-react-app