Usar Bulma con Next.js

Escrito por una persona el 2022-01-26 y actualizado el 2022-01-26

Para un proyecto muy sencillo al que ando dando vueltas me he planteado usar Next.js y Bulma, como excusa para aprender un poquito de ambos. Aquí dejo anotado los pasos que he hecho para tener el entorno de desarrollo montado.

Empezaremos iniciando una aplicación Next.js, en este caso con soporte de Typescript:

yarn create next-app --typescript

También se puede hacer lo mismo sin Typescript. En ese caso quita el parámetro –typescript y en el resto de esta anotación dónde veas archivos .tsx, cámbialo por .js:

Seguidamente instalamos Bulma:

yarn add bulma

Ahora toca decidir si queremos utilizar los estilos de Bulma y hacer los ajustes que necesitemos mediante nuestra propia hoja de estilos o vamos un paso más allá y queremos poder modificar los estilos de Bulma mediante la modificación de sus propiedades gracias a sass.

Opción 1: Usar Bulma y nuestra hoja de estilos

En el archivo pages/_app.tsx añadir:

import 'bulma/css/bulma.css'

Con esto estamos usando la hoja de estilos de Bulma que hay en el directorio node_modules (Next.js se encarga de saber que ha de buscarlo allí). También podemos importar la versión comprimida en formato min, bulma.min.css o la versión rtl, bulma-rtl.

Ahora ya podemos usar las clases css de Bulma, por ejemplo añadiendo en pages/index.tsx:

return (
  ...

  <button className="button is-primary">Primary</button>

  ...
)

Opción 1.1: Usar Bulma desde un CDN y nuestra hoja de estilos

Si no queremos usar Bulma desde node_modules podemos usar un CDN. En ese caso podemos importar Bulma en el head del html. En el archivo pages/index.tsx:

const Home: NextPage = () => {
  return (
    ...
      <Head>
        <title>Create Next App</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
      </Head>
    ...

O importar Bulma desde nuestra hoja de estilos. En el archivo styles/styles.css:

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css";

Opción 2: Usar Bulma, adaptarla mediante propiedades y aplicar nuestra hoja de estilos

Primero hemos de instalar sass:

yarn add sass

Añadir al archivo _app.tsx:

import '../styles/globals.scss'
import '../styles/styles.scss'

Seguidamente renombrar styles/globals.css por styles/globals.scss y styles/styles.css por styles/styles.scss.

Eliminar el contenido de styles/globals.scss y añadir:

$primary: #900; // Aquí se sobreescriben todas las variables que se quieran

@import 'bulma/bulma.sass';

En styles/styles.scss añadir:

@import 'globals.scss'

html {} // Añadir los estilos que se quieran