Show docs navigation

Using Stylify CSS in Next.js

Stylify can be easily integrated into the Next.js using @stylify/unplugin.

Try it on StackBlitz

How to integrate the Stylify into the Next.js

First install the @stylify/bundler package using NPM or Yarn:

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

Next add a configuration into the next.config.js:

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

const stylifyPlugin = (dev) => webpackPlugin({
    dev: dev,
    bundles: [{ outputFile: './styles/stylify.css', files: ['./pages/**/*.js'] }],
    // Optional
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    }
});

module.exports = {
  reactStrictMode: true,
  webpack: (config, { dev }) => {
    config.plugins.push(stylifyPlugin(dev));
    return config;
  }
}

And the last step is to add the stylify.css into the _app.js:

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

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

export default MyApp;

Now you can use the Next.js commands to build your assets. In production, it will mangle selectors.

Where to go next?

Edit this page on Github