Uso de Stylify CSS en Nuxt.js

Nuxt.js es un framework de código abierto que utiliza Vue.js para hacer que el desarrollo web sea sencillo y potente.

La integración utiliza paquetes CSS de Stylify para Nuxt 2 y Nuxt 3. Echa un vistazo a las guías a continuación.

Cómo integrar Stylify CSS en Nuxt.js v3+

Pruébalo en StackBlitz

Primero, instala el paquete usando CLI:

npm i -D @stylify/nuxt
yarn add -D @stylify/nuxt

A continuación, añade un módulo de compilación en la sección de módulos de compilación nuxt.config.js:

modules: [
	'@stylify/nuxt'
]

Ahora puedes empezar a usar Stylify CSS con Nuxt.js.

Cómo integrar Stylify CSS en el Nuxt.js v2+ < v3

Pruébalo en StackBlitz

Primero, instala el paquete usando CLI:

npm i -D @stylify/nuxt-module
yarn add -D @stylify/nuxt-module

A continuación, añade un módulo de compilación en la sección de módulos de compilación nuxt.config.js:

buildModules: [
	'@stylify/nuxt-module'
]

Ahora puedes empezar a usar Stylify CSS con Nuxt.js.

Configuración

Hay muchas opciones que puedes configurar:

• Nuxt v3: @stylify/nuxt
• Nuxt v2: @stylify/nuxt-module

Stylelint

En caso de que uses Stylelint, puede que quieras añadir el stylify.css generado y posibles archivos con variables en el archivo .stylelintignore.

assets/stylify.css
assets/scss/variables/stylify-variables.scss

Si Stylelint se queja de un patrón que no coincide con ningún archivo, añade la regla —allow-empty-input en el archivo package.json al lint:style y la configuración stylelint en el nuxt.config.js:

stylelint: {
	allowEmptyInput: true
}

Build config

La compilación puede fallar porque no está configurada para usar las características modernas de ES6. Puedes arreglarlo configurando la opción transpile en nuxt.config.js:

build: {
	transpile: [
		'@stylify/stylify/lib/index.cjs',
		'@stylify/stylify/esm/index.mjs'
	]
}