sass? 왜?

Vuetify를 UI 프레임워크를 쓰며 sass를 같이 사용하기로 했다.
Vuetify에서 sass를 이용해 특정 스타일을 지정하고 바꿀 수 있고, 프로젝트에서 css 대신 sass를 이용해 변수, mixin, placeholder 등을 통해 간편하게 스타일을 적용 할 예정이다.
sass를 vuetify에 적용하면서 많이 해맸으므로 적어 볼 예정이다.

vuetify & sass 설정

처음에 vuetify sass설정 홈페이지에서 보면서 적용했다. 하지만 생각보다 원하는 부분을 설명해주지 않았다.

---

variables.scss

path: "src/styles/variables.scss"
"src/styles/"폴더 안에 variables.scss를 만든 뒤 vuetify component들의 스타일을 지정하면 vuetify에서 알아서 불러온다. (폴더 구조는 밑에 첨부했다.)
설정은 아래와 같이 했다.

@charset "UTF-8";
// 위치 : src/styles/variables.scss
// 설명 : 프로젝트 전체에 적용되는 변수에 대해 정의함
// 주의 : 컴포넌트 갯수 만큼 실행되기 때문에 변수에 대해서만 정의해야합니다. (실제 CSS에 대한 적용은 sass/styles.scss에 작성)

// 폰트 import
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

// 아래의 file을 import 해야만 vuetify의 변수를 사용할 수 있음
@import "~vuetify/src/styles/styles.sass";
// Vuetify Globals
// Vuetify에 자동으로 오버라이드 됨
$body-font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
$border-radius-root: 6px;
$font-size-root: 14px;
$input-letter-spacing: -0.4px;
$input-label-height: 24px;
$input-label-letter-spacing: -0.4px;
$snackbar-bottom: 40px;

---

vuetify.js

path: "src/plugins/vuetify.js"
기억으로는 vuetify install 한 뒤 해당파일이 생성된 것 같다. (기억이 가물가물...)
vuetify.js에서 해당 프로젝트에 불러올 scss파일을 import한다. (scss 파일 하나에 import 할 scss를 모아놨다.)
또한 언어를 지정할 수 있다. "ko"한국어를 넣으면 컴포넌트의 글자들이 한국어로 나온다. 다른 컴포넌트는 정확히 모르지만 달력 컴포넌트에서는 한국어로 잘 나왔다.

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import '@/styles/sass/style.scss'; // style.scss를 한번만 불러오면 자동으로 css로 컴파일 해줌
import { en, ko } from 'vuetify/es5/locale';
Vue.use(Vuetify);

export default new Vuetify({
  // 언어 설정
  lang: {
    locales: { ko, en },
    current: 'ko', // 한국어
  },
  theme: {
    dark: false, // dark theme 제외
    default: 'light',
    themes: {
      // light 모드 적용시 스타일 지정
      light: {
        primary: '#0544e8',
        primaryDark: '#020541',
        btnBlack: '#35363B',
        darkGrey: '#2c2d3c',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#EF4242',
        info: '#2196F3',
        success: '#1CC966',
        warning: '#FB8C00',
        inputBG: '#fcfcfc',
        selectedBlue: '#1251fc',
        white: '#fff',
      },
      // dark 모드 적용시 스타일 지정
      // 이 프로젝트에서 사용 안함
      // dark: {
      //   primary: '#2196F3',
      //   secondary: '#424242',
      //   accent: '#FF4081',
      //   error: '#FF5252',
      //   info: '#2196F3',
      //   success: '#4CAF50',
      //   warning: '#FB8C00',
      // },
    },
  },
});

theme안에는 primary, secondarty 색상을 지정할 수 있고 지정한 색상은 아래 코드 처럼 태그안에 바로 집어 넣을 수 있다. (편하다!)

<v-btn color="btnBlack" width="50%" height="48" class="white--text" @click="$emit('close')">미동의</v-btn>
<v-btn color="primary" width="50%" height="48" class="white--text" @click="$emit('submit', 'agree')">동의함</v-btn>

---

style.scss

path: "src/styles/sass/style.scss"
style.scss는 사용 할 모든 scss파일을 import하는 전용파일로 썻다.

@charset "UTF-8";
// 위치 : src/assets/scss/style.scss
// 설명 : 각 요소에 적용될 SCSS를 한곳에 모아서 관리함
// 주의 : 이 파일은 vue.config.js에 설정하면 안돼요

@import "~@/styles/sass/sass-utils/all";
@import "~@/styles/sass/vendors/all";
@import "~@/styles/sass/base/all";
@import "~@/styles/sass/component/all";
@import "~@/styles/sass/layout/all";

모두 all.scss를 import하는 이유는 각 폴더 안에 "_all.scss"를 만든 후 폴더 안에 있는 scss 파일들을 import했다.

// layout 폴더에 있는 scss import
@import "form";
@import "layout";
@import "list";
@import "login";
@import "register";
@import "statistics";
@import "status";

---

scss 폴더/파일 구조

---