Next.js

// TODO: link to examples

UnoCSS와 Next.js 시작하기.

설정

설치

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

설정

프로젝트 루트에 uno.config.ts를 생성하세요.

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

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

플러그인 추가

그런 다음 next.config.js를 통해 webpack에 UnoCSS를 플러그인으로 추가하세요.

// 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

스타일시트 가져오기

그런 다음 _app.tsx에서 uno.css를 가져오세요.

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

사용법

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

HMR을 지원하려면 webpack의 캐싱을 선택 해제해야 합니다.

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

문제 해결

가상 모듈 관련 오류

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

.next 디렉토리를 삭제하고 개발 서버를 다시 시작해보세요.

기타

프로젝트를 빌드하려면 tsconfig.json에서 대상을 최소 es2015로 올려야 할 수도 있습니다.

.js 확장자를 가진 파일은 기본적으로 지원되지 않습니다. 파일 확장자를 .jsx로 변경하거나 설정에서 include: /\.js$/로 js 파일을 포함해보세요. 자세히 알아보기.