[SCSS] 전역으로 SCSS 변수 파일 등록하기

안녕하세요.

야근 중입니다.

새로 들어간 프로젝트에서 마크업과 스타일 작업을 진행하고 있습니다. CSS는 CSS 전처리기인 SASS의 SCSS로 작성하고 있습니다.

많이 사용하는 색깔이나 크기 style들을 변수와 요소 스타일 설정으로 common.scss라는 파일에 모아두고 사용하고 있습니다.

 

 

매번, 여러 컴포넌트에서 계속 임포트를 해서 사용하려고 하니까, 개발하는데 너무 불편했습니다.

장기적으로 볼 때, 계속 중복되는 코드를 사용하는 것은 불편하다고 생각했습니다.

// 👇 불편한 코드

@import '@/assets/scss/common.scss';

 

그래서, 이 불편한 문제를 해결하기 위해서 공통으로 사용하는 스타일 값들을 전역 변수로 등록할 방법을 찾아다녔습니다. 정확하게 vue-cli 문서에서 그 방법을 가이드하고 있습니다. 그 방법을 지금부터 알아보겠습니다.

 

저희 제품은 vue-cli  v4를 사용하고 있습니다. vue-cli v4의 webpack 정보 보기

제품 스펙은 다음과 같습니다.

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2",
    "vuetify": "^2.4.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  },

vue-cli는 sass-loader(loader)와 node-sass(compiler) 모듈은 기본으로 설치 되어 있지 않기 때문에 별도로 해당 모듈을 설치해야 합니다.

npm install sass-loader sass webpack --save-dev

 

그리고, webpack alias 설정으로 at(@)를 설정해 주었습니다. @ = '/src/'

 

1. _variabled.scss 파일 생성

_가 붙은 scss 파일은 변수만을 저장하는 scss파일로 인식됩니다.

📁 src/assets/scss에 _variabled.scss 파일을 생성하고 그 안에 다음 변수를 저장했습니다.

📁 src/assets/scss/_variabled.scss

$GLOBAL_MAX_WIDTH: 1200px;
$LIGHT_GRAY: rgb(243, 243, 243);
$BORDER_BOTTOM: 1px solid rgba(0, 0, 0, 0.12);
$BACKGROUND_GRAY: #f4f7f6;
$PHANTOM: #741eec;

 

 

2. vue.config.js 설정

📁 src/vue.config.js

webpack 설정을 별도로 해주기 위해서 vue.config.js 파일에 webpack 설정을 작성했습니다.

주의 사항은 sass-loader v8 버전 이상부터 이 옵션을 적용할 수 있습니다.

addtionalData에 scss변수 파일 경로를 설정해주면 webpack이 빌드를 하면서 scss를 트랜스파일링하기 전에 선반영하게 됩니다.

module.exports = {
    transpileDependencies: ['vuetify'],
    css: {
        loaderOptions: {
            scss: {
                // pass options to sass-loader
                // @/ is an alias to src/
                // so this assumes you have a file named `src/variables.sass`
                // Note: this option is named as "prependData" in sass-loader v8
                additionalData: `@import "@/assets/scss/_variables.scss";`
            }
        }
    }
};

참고: webpack- addtionalData 

 

3. 사용하기

app.vue나 main.js에 별도로 import 하지 않고 사용하면 됩니다.

 

작동 확인!

 

 

참고

vue-cli css-modules