thisyujeong.dev

Vue 환경에서 Sass 설치 및 설정 (vue 3)
May 15, 2022

sass 와 sass-loader 를 설치한다. vue3 에서 발생하는 sass-loader의 버전 오류방지를 위해 10버전으로 선택하여 설치한다.

node-sass 또한 버전 충돌이 있을 시 다운그레이드가 필요

yarn add node-sass sass-loader@10

지역 범위에서 사용하기

임포트 경로의 @ 는 /src 를 의미함.

style 영역에 lang 속성으로 scss 사용을 설정한다.

// *.vue
<style lang="scss">
  @import "@/style/_variables.scss";
  @import "@/styles/_mixins.scss";
  .className {
    background: $bgColor;
  }
<style>

지역범위에서 사용할 때 변수, mixin 과 같은 공통 css을 모두 임포트해야한다. 이를 해결하기 위해 전역범위 세팅한다.

전역 범위에서 사용하기

vue 3.x 버전에서는 webpack.config.js 가 아닌 vue.config.js 를 생성해 설정이 필요하다.

아래와 같이 sass-loader에 추가된 모든코드는 전역 범위에서 사용이 가능하다.

// vue.config.js
module.exports = {
  // .. options
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import @/styles/_variables.scss;
          @import @/styles/_mix.scss;
        `
        }
      }
    }
  }
}

vue 2.x 에서 사용하기

// webpack.config.js
{
  test: \/.scss&/,
  use: [
    "vue-styles-loader",
    "css-loader",
    {
      loader: "scss-loader",
      options: {
        data: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
  ]
}