[Vue] scss를 사용해보자

참조
쌩우님 블로그
Heropy 블로그
function_dh velog

scss란?

나는 sass에 대한 개념자체가 없어서 한번 정리하고 넘어간다.

css의 한계

css는 브라우저를 이쁘게 꾸밀수 있게 도와준다. 하지만 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재등 프로젝트가 커질수록 아쉬움도 같이 커진다. 하지만 웹에서는 표준 css만 동작할 수 있기 때문에 다른 선택권이 없었다. ㅠㅠㅠ

CSS Preprocessor란?

Sass, Less등이 있다. 이 것들은 CSS 전 처리기 입니다. 보통 CSS Preprocessor라고 부른다.

CSS가 동작하기 전에 사용하는 기능, CSS의 불편함을 이런 확장 기능을 통해 상쇄할 수 있다.

CSS preprocessor작동 원리?

웹에서는 CSS만 동작합니다. Sass, Less, Stylus 같은 전처리기는 직접 동작시킬 수 없습니다. 어떻게 사용할 수 있을까?

컴파일한다. CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위의 연산등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다. 이 작성한 것들을 CSS 알아 먹을 수 있게 컴파일 해주는 것이다.

Sass와 SCSS의 차이점

Sass(Syntactically Awesome Style Sheets)의 3버전에서 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass 모든 기능을 지원하는 CSS의 상위 집합.

SCSS 짱!

간단한 차이는 {}와 ;(세미콜론)의 유무이다.

문법

HEROPY님 블로그
너무 문법을 잘 정리해주셨다.! 내가 정리하기엔 양이 너무 많아... 잘 알지도 못하고..

Vue에서 Scss 사용하기

설치

아래 명령어를 사용해서 package에 node-sass 와 sass-loader를 설치해줍시다.

npm install --save-dev node-sass sass-loader

주의
vue 2.6 버전에서는 sass-loader 10버전 대를 지원하기 때문에 그보다 버전이 높다면 10으로 버전을 내리고 재 설치 해주면 된다.

사용법

설치를 완료했다면, 컴포넌트 내에서 scss를 사용할 수 있다. vue-loader에서 기본으로 설정되어 있는 webpack설정 때문에 패키지 설치 후 컴포넌트 내에서 lang속성을 지정해주면 자동으로 Loader를 사용하여 바로 사용가능

<style lang = "scss">
 @import "@/asstes/scss/파일명";
</style>

전역 스타일 및 변수 설정

변수를 담아둔 scss파일을 매번 컴포넌트에서 불러와서 사용하는것은 매우 비효율적이다. 따라서 자주 사용하는 변수나 , reset 스타일, mixin같은 경우 전역 스타일로 설정하여 사용이 가능하다.

설정 방법은 프로젝트 최상단에 vue.config.js파일을 생성해서 webpack설정을 추가 할 수 있다. 전체적인 구조는 같지만 8버전 에서는 prependData로 선언 아래 에서는 additionalData를 선언하면 전역으로 scss가 적영되게 된다.

vue3 cli

//webpack 설정을 추가
module.exports = {
  css : {
    loaderOptions : {
      sass : {
        additionalData: `
          @import "@/assets/scss/abstracts/abstracts.scss";
        `
      }
    }
  }
}

// 예시
// abstracts.scc
$TEXT_DEAFULT : #333;

// 다른 컴포넌트
<style lang="scss">
  p {
    color : $TEXT_DEAFULT
  }
</style>

vue cli 2버전

2버전의 경우 webpack.config.js에서 설정을 변경 해줘야한다.

{
  test: \/.scss&/,
  use: [
    "vue-styles-loader",
    "css-loader",
    {
      loader: "scss-loader",
      options: {
        data: `
          @import "@/assets/scss/abstracts/abstracts.scss";
        `
      }
    }
  ]