Sass 환경에서 설치 및 설정 (vue 3)

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

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

yarn add node-sass sass-loader@10

지역 범위에서 사용하기

import 경로의 @ 는 /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";
        `
      }
    }
  ]
}