@stylify/nuxt-module

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

Pruébalo en StackBlitz

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

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

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 de abajo debe usarse dentro del nuxt.config.js o dentro del stylify.config.js:

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

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: [],
	// Los cargadores se utilizan durante la compilación de webpack cuando compiler.mangleSelectors se establece en true y cuando nuxt ejecuta la compilación de producción
	// Cuando un archivo es cargado por webpack según el cargador definido, su contenido
	// será manipulado por el compilador de CSS de Stylify.
	// Los cargadores tienen la siguiente estructura
	// {
	//		test: /\.vue$/i,
	//		include: ['path/to/some/dir']
	//	},
	loaders: []
});

Ejemplo para nuxt.config.js

export default {
	stylify: stylifyConfig
}

Ejemplo para stylify.config.js

export default stylifyConfig;