[vue3] SCSS사용 방법(정말 쉬움.)

SCSS란?

CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수에 용이하다.

SCSS 설치

npm install -D sass

프로젝트에서 sass파일 만들기
project
  - src
    - assets
        - scss
           main.scss
assets 안에 scss라는 폴더를 생성하고 main.scss 파일을 생성하자.
생성했으면 main.js에 import해서 사용하도록 한다.

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/scss/main.scss"; //이부분이 scss import한 부분
createApp(App).mount("#app");