在Rollup.js中使用Stylify CSS

Rollup.js是一个JavaScript的模块捆绑器，它可以将小段的代码编译成更大更复杂的东西，比如一个库或应用程序。

如何将Stylify的CSS集成到Rollup.js中

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

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

接下来，添加创建一个配置文件rollup.config.js：

const { stylifyRollup } = require('@stylify/unplugin');
const postcss = require('rollup-plugin-postcss');

const stylifyPlugin = stylifyRollup({
	bundles: [{ files: ['./index.html'], outputFile: './index.css' }],
	// 可选
	//编译器配置信息 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: {},
		// ...
	}
});

export default {
	input: 'input.js',
	plugins: [stylifyPlugin, postcss()],
	output: { file: 'index.js', format: 'umd' }
};

现在你可以运行build命令。这将生成stylify.css，并在文件中混入选择器，如果配置了的话。