@stylify/nuxt

El módulo Nuxt proporciona una integración perfecta de Stylify CSS en Nuxt.js v3+.

Pruébalo en StackBlitz

Instalación

El módulo Nuxt sólo se puede instalar a través de CLI como NPM o Yarn:

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

Uso

Añade un módulo en nuxt.config.js:

modules: [
	'@stylify/nuxt'
]

Configuración

Si quieres configurar Stylify, puedes usar la sección de configuración directamente en nuxt.config.js o crear un fichero stylify.config.js junto al nuxt.config.js. En ambos casos se utiliza el mismo esquema de configuración que se muestra a continuación.

La parte de código que sigue debe usarse dentro del nuxt.config.js o dentro del stylify.config.js o stylify.config.mjs:

import { defineConfig } from '@stylify/nuxt';

const stylifyConfig = defineConfig({
	dev: false,
	configPath: 'stylify.config.js',
	// Información de configuración del compilador https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	},
	// Cuando se establecen rutas vars dir, Stylify CSS exportará las variables a
	// un archivo de acuerdo a la ruta dada
	// cssVarsExportPath: 'path/to/dir',
	// cssVarsExportPath: 'path/to/export-file.css',
	cssVarsExportPath: null,
	sassVarsExportPath: null,
	lessVarsExportPath: null,
	stylusVarsExportPath: null,
	// Las máscaras de los archivos son utilizadas por @stylify/bundler
	// Bundler utiliza estas máscaras para encontrar los archivos de los que debe generar CSS
	// Cuando añades una máscara y quieres mangleSelectors, también necesitas añadir el cargador apropiado. Ver más abajo
	filesMasks: []
});

Ejemplo para nuxt.config.js

export default {
	stylify: stylifyConfig
}

Ejemplo para stylify.config.js

export default stylifyConfig;