Tener componentes funcionales es solo el primer paso; sin estilos, la interfaz queda incompleta. A continuación se explica cómo organizar archivos SCSS, importarlos correctamente y mantener una estructura de carpetas coherente dentro de un proyecto React.
¿Cómo se organizan los archivos de estilos en un proyecto React?
Cuando se trabaja con React, la clave está en separar los estilos de acuerdo con la responsabilidad de cada componente. En lugar de mantener un único archivo CSS gigante, se divide en archivos independientes que corresponden a cada parte de la aplicación.
El punto de partida es revisar el archivo de estilos descargado e identificar qué bloques son generales y cuáles pertenecen a un componente específico [0:38]. Los estilos generales, como los que aplican al body o al contenedor principal, se colocan en un archivo llamado App.scss dentro de la carpeta assets. De esta forma, el archivo raíz solo contiene reglas globales.
Para los componentes, se crea una subcarpeta llamada components dentro de la carpeta de estilos [2:33]. Así se replica la misma jerarquía que existe en la carpeta de componentes del proyecto, lo que facilita encontrar y mantener cada archivo.
¿Cómo se importan estilos SCSS dentro de un componente?
Una vez que el archivo de estilos existe, es necesario importarlo en el componente correspondiente. La sintaxis es directa:
javascript
import '../../assets/styles/App.scss';
Este import no asigna ningún nombre, ya que no se exporta un módulo sino que simplemente se inyecta la hoja de estilos [1:24]. El bundler (como Webpack) se encarga de procesarlo y aplicarlo al DOM.
¿Por qué incluir la extensión del archivo?
Aunque en React los componentes se importan habitualmente sin extensión, para los archivos CSS o SCSS se recomienda añadir la extensión .scss de forma explícita [1:56]. Esto evita confusiones entre la importación de un componente JavaScript y la de una hoja de estilos.
¿Cómo se aplica el mismo patrón al componente Header?
El proceso se repite para cada componente. En el caso de Header, se copian las reglas correspondientes —desde la línea donde inician los selectores de header— y se colocan en un nuevo archivo header.scss dentro de styles/components/ [2:48].
Después, dentro del componente Header.jsx, se importa el archivo:
javascript
import '../../assets/styles/components/header.scss';
Al guardar y revisar el navegador, los estilos del contenedor general y los del header ya se reflejan correctamente [3:33].
¿Qué estructura de carpetas resulta de este enfoque?
Mantener una jerarquía clara es fundamental para escalar el proyecto. La estructura queda así:
- src/assets/styles/App.scss: estilos globales del proyecto.
- src/assets/styles/components/header.scss: estilos específicos del componente Header.
- src/components/Header.jsx: componente que importa sus propios estilos.
Cada nuevo componente seguirá el mismo patrón: crear su archivo .scss en la subcarpeta de estilos, importarlo en el componente y mantener la correspondencia entre ambas estructuras de carpetas.
Este flujo garantiza que los estilos estén modularizados, sean fáciles de localizar y no generen conflictos a medida que la aplicación crece. Si tienes alguna duda sobre cómo adaptar este patrón a tu propio proyecto, compártela en los comentarios.
