Vue - scss 전역 스타일 사용하기

SCSS 전역 스타일 사용

※ 테스트 버전 "vue": "^2.6.14"

 

 

사용 목표

• 변수 $
• @mixin, @include

 

 

'$'변 수사용

 

전역으로 설정해놓고 다른 파일에서 사용

// set
$color: #3b3b3b;
 
// use
h3 {
  color: $color;
}

 

 

@mixin 사용

필요

sass, sass-loader

 

 

주의

vue 2.6.x에서는

sass-loader 10버전 이하를 사용해야 함.

최신버전으로 설치했더니 에러.

(▼▼ 릴리즈 버전 확인은 페이지 하단 ▼▼)

 

 

사용예제

/* set */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
 
@mixin box-sizing() {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
 
/* use */
.my-box {
 @include border-radius(25px);
}

 

 

파일 수정

vue.config.js 

- import 없이 파일을 불러옴

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

 

 

빌드하고 실행.

 

 

---

 

 

릴리즈 확인 

https://github.com/webpack-contrib/sass-loader/releases

Releases · webpack-contrib/sass-loader