在Webpack中使用Stylify CSS

Webpack是一个模块捆绑器。它的主要目的是捆绑JavaScript文件以便在浏览器中使用，然而它也能够进行转换、捆绑等。

如何将Stylify的CSS集成到Webpack中

首先，使用NPM或Yarn安装@stylify/unplugin软件包：

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

接下来，在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'
	}],
	// 可选
	// 编译器配置信息 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'
	}
};

现在将生成的index.css文件添加到index.js入口文件中。