Uso de Stylify CSS con Webpack

Webpack es un agrupador de módulos. Su propósito principal es empaquetar archivos JavaScript para su uso en un navegador, aunque también es capaz de transformar, empaquetar, etc.

Cómo integrar el CSS de Stylify en el Webpack.

Primero, instala el paquete @stylify/unplugin usando NPM o Yarn:

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

A continuación, añade la siguiente configuración en el archivo webpack.config.js:

const path = require('path');
const { stylifyWebpack } = require('@stylify/unplugin');

const mode = 'development';
const stylifyPlugin = stylifyWebpack({
	bundles: [{
		outputFile: './index.css',
		files: ['./**/*.html'],
		rewriteSelectorsInFiles: mode === 'production'
	}],
	// Opcional
	// 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: {},
		// ...
	}
});

module.exports = {
	entry: './input.js',
	mode: mode,
	plugins: [ stylifyPlugin ],
	module: {
		rules: [{
			test: /\.css$/i,
			use: ["style-loader", "css-loader", "postcss-loader"]
		}],
	},
	output: {
		path: path.resolve(__dirname),
		filename: 'index.js',
		libraryTarget: 'umd'
	}
};

Ahora añade el archivo generado index.css en el archivo de entrada index.js.