在Next.js中使用Stylify CSS

Next.js为你提供了创建可扩展的生产级React应用程序。

使用@stylify/unplugin，Stylify可以轻松地集成到Next.js中。

在StackBlitz上试试吧

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

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

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

接下来在next.config.js中添加一个配置：

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

const stylifyPlugin = (dev) => stylifyWebpack({
	dev: dev,
	bundles: [{ outputFile: './styles/stylify.css', files: ['./pages/**/*.js'] }],
	// 可选
	// 编译器配置信息 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 = {
	reactStrictMode: true,
	webpack: (config, { dev }) => {
		config.plugins.push(stylifyPlugin(dev));
		return config;
	}
}

最后一步是将stylify.css添加到_app.js中：

import '../styles/globals.css';
import '../styles/stylify.css';

function MyApp({ Component, pageProps }) {
	return <Component {...pageProps} />
}

export default MyApp;

现在你可以使用Next.js命令来构建你的资产。在生产中，它将混入选择器。