vue sass global import - Sass 사용시 중복으로 import 안하도록 하는 방법

흔히 scss 작성시 다음과 같이 import 하여 사용한다.

@import "./variables.scss";

* {
	margin: 0;
	padding: 0;
	color: $primary-color // variables.scss내에 선언된 변수
}

한두번은 괜찮지만 컴포넌트가 10개...100개...1000개 라면?
코드 한줄 한줄 줄이는건 우리에겐 소중하니까...

다음과 같이 설정해주자

 

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/style/variables.scss";
        `,
      },
    },
  },
};

이제 다른 컴포넌트에서 자유롭게 사용하자

// exampleComponent.js
// @import "./variables.scss"; <-- 생략가능(sass 전처리기에서 자동으로 넣어줌)
* {
	margin: 0;
	padding: 0;
	color: $primary-color // variables.scss내에 선언된 변수
}