[javascript] Nuxt.js에서의 테마(tailwind, bootstrap 등) 사용 방법은?

19 Dec 2023

Nuxt.js는 재사용 가능한 UI 컴포넌트와 스타일을 제공하는 테마를 사용할 수 있습니다.

Tailwind CSS 테마 사용 방법

Tailwind CSS를 Nuxt.js 프로젝트에 통합하는 방법은 다음과 같습니다.

Tailwind CSS 설치: Nuxt.js 프로젝트에 Tailwind CSS를 설치합니다.
```
npm install tailwindcss
```
tailwind.config.js 생성: 루트 디렉토리에 tailwind.config.js 파일을 생성하고 사용자 정의 구성을 추가합니다.
```
// tailwind.config.js
module.exports = {
  // 커스텀 구성 옵션
}
```

CSS 파일에 Tailwind 추가: 프로젝트의 CSS 파일(예: assets/styles.css)에 Tailwind CSS를 import 합니다.

/* assets/styles.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Nuxt.js 구성에 Tailwind 추가: nuxt.config.js 파일에서 Tailwind CSS를 설정합니다.

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/tailwindcss',
  ],
}

이제 Tailwind CSS 테마가 Nuxt.js 프로젝트에서 사용 가능합니다.

Bootstrap을 Nuxt.js에 통합하는 방법은 다음과 같습니다.

Bootstrap 설치: Nuxt.js 프로젝트에 Bootstrap을 설치합니다.
```
npm install bootstrap
```
CSS 파일에 Bootstrap 추가: 프로젝트의 CSS 파일(예: assets/styles.css)에 Bootstrap CSS를 import 합니다.
```
/* assets/styles.css */
@import 'bootstrap/dist/css/bootstrap.css';
```

JS 파일에 Bootstrap 추가: 프로젝트의 JS 파일(예: nuxt.config.js)에서 Bootstrap JS를 import 합니다.

// nuxt.config.js
export default {
  // 다른 설정
  ...
  css: [
    // 다른 스타일 시트
    'bootstrap/dist/css/bootstrap.css'
  ],
  ...
}

이제 Bootstrap 테마가 Nuxt.js 프로젝트에서 사용 가능합니다.

위 방법을 사용하여 Nuxt.js에서 Tailwind CSS 또는 Bootstrap과 같은 테마를 통합할 수 있습니다.

참고자료: