logo studio roma
EN / ES

Back to Blog

SCSS y Next.js

Pablo Romera foto

Pablo Romera 

/

 June 22, 2023 / 3 min read

Pablo Romera foto

En esta breve guía, conocerás cómo aprovechar las ventajas de SCSS (Sass) en tu proyecto Next.js. Exploraremos la estructura de carpetas, la configuración de scripts en el archivo package.json y también, cómo importar los estilos SCSS en tus componentes. Con esta información, podrás mantener una organización impecable en tus estilos y optimizar el rendimiento de tu sitio web.

Estructura de carpetas

Para mantener una estructura organizada en tu proyecto Next.js, crearemos una carpeta "styles" en el directorio raíz del proyecto. Dentro de esta carpeta, crearemos dos subcarpetas:

  1. "scss": Aquí colocaremos nuestros archivos SCSS para escribir nuestros estilos de forma modular.
  2. "css": Aquí irá nuestro archivo global.css

La estructura de carpetas quedará de la siguiente manera:

- project folder
	- styles
		- scss
		- css
	- other folders

Configuración de scripts en package.json

Para habilitar la compilación de SCSS y la observación de cambios durante el desarrollo, actualizaremos los scripts en el archivo package.json. A continuación, se muestra la nueva configuración:

"scripts": {
	"dev":"next dev && sass --watch --update --style=expanded styles/scss:styles/css",
	"build":"npm run build:scss && next build",
	"start":"next start",
	"lint":"next lint",
	"build:scss": "sass styles/scss -o styles/css"
}

Explicación de los scripts nuevos:

  • El script "dev" ejecutará Next.js en modo de desarrollo gracias a next dev. El segundo comando que podemos ver se utiliza durante el desarrollo para observar y compilar automáticamente los archivos SCSS mientras se realizan cambios en ellos. El comando se mantiene en ejecución y monitorea los archivos SCSS en busca de modificaciones. Cuando se detecta un cambio en un archivo SCSS, el comando Sass lo compila automáticamente y genera el archivo CSS correspondiente según la configuración definida, eliminando la necesidad de ejecutar manualmente el comando de compilación cada vez que se realice algún cambio.
  • El script "build" se encargará de construir la aplicación para el entorno de producción. Antes de la construcción, ejecutará el script "build:scss" para compilar los estilos SCSS en CSS.
  • El script "build:scss" compilará los archivos SCSS en CSS utilizando Sass.

Producción

Todo esto funcionará en el entorno de desarrollo, pero a la hora de pasar a producción deberemos hacer cambios. Vercel y Next.js tienen soporte incorporado para sass, por lo que no deberíamos tener problemas al hacer deploy de tu aplicación en Vercel.

En el caso de usar Vercel, tus scripts en package.json se verían así:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

Uso de los estilos en un componente

En un proyecto Next.js, no necesitas convertir explícitamente tus archivos .scss a .css. Cuando importas un archivo .scss en un componente, Next.js se encargará automáticamente de compilar y aplicar estos estilos al construir tu aplicación. Por lo tanto, en tu proyecto puedes tener una estructura como esta:

└── styles
    ├── scss
    │   ├── _variables.scss
    │   └── main.scss
    └── css
        └── (aquí no se generan archivos .css, Next.js maneja la compilación internamente)
import "../styles/scss/main.scss";

// El resto de tu código...

Conclusión

Utilizar SCSS con Next.js es sencillo y mejora la organización y mantenibilidad de tus estilos. Con una estructura de carpetas ordenada y la configuración adecuada de los scripts en el archivo package.json, puedes compilar tus estilos SCSS en CSS y aplicarlos a tus componentes de Next.js sin problemas. Aprovecha todas las ventajas de SCSS en tu proyecto Next.js y crea estilos más eficientes y reutilizables.

Recuerda ajustar la estructura de carpetas y los nombres de archivos según tus preferencias y necesidades específicas.