프로젝트에 scss를 전역적으로 사용하는 방법

어쩌다 보니 vue를 쓰게 되다 보니 최근에 미니 플젝을 잠시 중단하고 vue에 대해 공부 중에 있습니다.

 

 

Vue에서 scss를 변수를 설정하기 위해서는 두 가지를 프로젝트에 설치를 해야 합니다.

npm i node-sass sass-loader

node-sass

스타일시트 전처리 언어입니다. sass나 scss를 사용할 수 있습니다.

 

sass-loader

SCSS 파일을 가져와 CSS로 컴파일합니다.

여기서 컴파일은 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다. 즉 필자가 이해한 바로는 한국어를 영어로 바꿔주는 거로 이해가 되었습니다.

 

즉, node-sass로 sass 혹은 scss를 사용할 수 있으며, sass-loader가 sass/scss 확장자를 CSS로 컴파일해서 보여주는 거라고 생각합니다.

 

 

아래는 변수만 저장하려는 파일을 만들었습니다. 파일명은 _variabled.scss로 많이들 하더라고요. 저 언더바를 붙이는 의미는 '이 파일은 CSS 파일로 컴파일을 하지 말아 주세요.'라는 의미라고 합니다.

// _variabled.scss
$indigo: #2c3333;
$blue: #395b64;
$sky: #a5c9ca;
$lightSky: #e7f6f2;

그리고 변수는 원하는 명칭으로 각자 프로젝트에 이해가 되게 설정을 합니다. 그 외 자주 쓰이는 CSS관련된 것 들을 적으면 됩니다.

ex) 메인 컬러 혹은 PC, Tablet, Mobile의 사이즈 등

 

이 scss는 전역으로 어디서든지 쓰기 위해서는 다른 방법으로 설정을 해야 합니다. 그래서 최상단에 vue.config.js를 수정합니다. 몇 군대 찾아보니까 만들라고 하시는 분들이 많은데, 이게 업데이트되면서 생긴 건지 몰라서 기존의 코드는 주석처리 후 아래처럼 작성을 했습니다.

module.exports = {
  // ...
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/_variabled.scss";`,
      },
    },
  },
};

 

loaderOptions

vue-loader의 내부 구성을 변경하는데 사용할 수 있는 CSS 옵션이 있다.

 

additionalData

여기에 전역으로 설정할 SCSS의 경로를 작성하면 된다. 다만, sass-loader 버전에 따라서 설정법이 약간 다른데 버전 8은 prependData를 사용하고, 그 이후로는 additionalData로 바꾸어 사용하면 된다.

 

이렇게 설정을 하게 되면 어느 컴포넌트에서 변수를 사용할 수 있다.

<template>
	...
</template>

<script>
	...
</script>

<style lang="scss">
li {
  color: $sky;
}
</style>

. vue에 style에서 lang라는 속성에 scss를 추가하면, 설정한 변수를 사용할 수 있는 것을 확인할 수 있습니다.

 

그런데 vue에서는 조금 다른 문법이 하나 더 있었습니다.

...
<style lang="scss" scope>
header {
  display: flex;
}
...

여기서 scope는 여기서 명칭으로 만든 .className이나 태그 설정하여 만든 CSS가 다른 곳에 적용이 되지 않게 막는 것입니다. 가끔 분명 CSS가 적용이 됐는데 도대체 어디서부터 받는 건지 헷갈리는 경우가 다소 많았던 기억이 있네요. 그걸 막는 방법이 있었는데 몰랐던 걸까요?

 

 

그 외 SCSS 변수에 대한 설명은 SCSS에서 변수 사용하는 방법을 참고해주시기 바랍니다.

찾아보니 이전에 SCSS에 대해 정리를 해두었네요.