Integracja Next.js UnoCSS

// TODO: link do przykładów

Pierwsze kroki z UnoCSS i Next.js.

Konfiguracja

Instalacja

pnpm

pnpm add -D unocss @unocss/webpack

yarn

yarn add -D unocss @unocss/webpack

npm

npm install -D unocss @unocss/webpack

bun

bun add -D unocss @unocss/webpack

Konfiguracja

Utwórz uno.config.ts w katalogu głównym swojego projektu.

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetWebFonts,
  presetWind3
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    // ...
  ],
})

Dodaj wtyczkę

Następnie dodaj UnoCSS jako wtyczkę do webpack przez swój next.config.js.

// next.config.js
const UnoCSS = require('@unocss/webpack').default

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(
      UnoCSS(),
    )
    return config
  },
}

module.exports = nextConfig

Importuj arkusze stylów

Then import uno.css in _app.tsx.

import type { AppProps } from 'next/app'
// _app.tsx
import '@unocss/reset/tailwind.css'

import 'uno.css'

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

export default MyApp

Usage

Style your components with unocss!

/* index.tsx */
const Home: NextPage = () => {
  return (
    <>
      <main className="py-20 px-12 text-center flex flex-col items-center gap-20px">
        <span text="blue 5xl hover:red" cursor="default">Nextjs</span>
        <div className="i-carbon-car inline-block" text="4xl" />
        <button className="btn w-10rem">Button</button>
      </main>
    </>
  )
}

Hot Module Reload

To support HMR you have to opt-out of webpack's caching.

// next.config.js
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
+   config.cache = false
    config.plugins.push(UnoCSS())
    return config
  }
}

Troubleshooting

Error concerning virtual module

Error: ENOENT: no such file or directory, open '.../_virtual_/__uno.css'

Try deleting the .next directory and restart the dev server.

Other

You might need to bump your target up to at least es2015 in your tsconfig.json to build your project.

Files with .js extension are not supported by default. Change your file extensions to .jsx or try to include js files in your config with include: /\.js$/. Learn more.