[nuxt3] nuxt3 + vuetify3 + pinia + typescript로 todolist앱 만들기 -7- assets

• 루트 폴더에 아래와 같이 폴더 구조를 생성해주세요.

• css: css를 저장합니다.
• imgs: png, svg와 같은 이미지들을 저장합니다.
• js: js svg 파일, 모듈 파일들을 저장합니다.
• stylesheets: scss, sass 등의 스타일 시트를 저장합니다.

스타일 시트 정리

• 스타일 시트 구조는 사람마다 의견이 모두 다르므로 사용하면서 편한 대로 구성하시되 기본적인 골자를 알려드리기 위해 아래 가이드를 작성합니다.

아래와 같이 스타일 시트들을 생성해주세요.

• main.scss : 메인 스타일 시트 파일로써 각 포인트가 되는 scss 파일 임포트, 변수 export의 역할을 합니다. app.vue에 import 해줍니다.

@import "./global";
@import "./colors";
@import "./breakpoints";

// javascript로 변수 내보냄
:export {
}

• import

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import "@/assets/stylesheets/main";
</style>

• _global.scss : 전역에 적용될 scss를 작성합니다.

html {
  padding: 0;

  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }
}

• _colors, _breakpoints, …: 각 색상, 브레이크 포인트 등 원하는 scss파일을 만들어 정리해줍니다.
• _breakpoints.scss

$desktop-2k: 2560px;
$desktop: 1920px;
$notebook: 1440px;
$tablet: 1024px;
$mobil: 600px;

• _colors.scss

$primary: #9943fc;
$secondary: #2234ab;

• pages : 각 페이지의 scss 파일들을 작성해줍니다. 폴더 구조는 루트의 pages.scss와 동일하게 구성합니다.

• components: 각 컴포넌트의 scss 파일을 저장합니다. 컴포넌트는 분리해서 작성해도 되고 컴포넌트 안에서 작성해도 되나 협업을 위해선 분리하는 걸 추천드립니다.