[VUE.js] vue3 scss media query 전역으로 쓰는 법

vue cli 버전 : 3.0.0

sass-loader : 10.2.0

 

(sass loader는 설치했다고 간주한다.)

 

나는 미디어쿼리를 적용하기 위해서 글로벌로 모바일, 타블렛, 데스크탑 크기를 정해놓고

mobile, tablet , desktop 이 이름만 컴포넌트에서 쓰고 싶었다. 

 

1. 글로벌 변수 파일 만들기

 

먼저 src폴더 아래에 style폴더를 만들고

_mixin.scss

_variables.scss

파일을 만들었다.

//_variables.scss
$breakpoint-mobile: 335px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1024px;

//_mixin.scss
@import './variables';

@mixin mobile {
    @media (max-width: #{$breakpoint-tablet}){
        @content;
    }
}
@mixin tablet {
    @media (max-width: #{$breakpoint-desktop}){
        @content;
    }
}
@mixin desktop {
    @media (min-width : #{$breakpoint-desktop}){
        @content;
    }
    
}
@mixin test {
    @content;
}

 

 

2. vue.config.js에 추가

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/style/_variables.scss";
          @import "@/style/_mixin.scss";
        `
      }
    }
  }
};

 

3. 컴포넌트에서 사용

 @include mobile {
    flex-direction: column;
    min-width: 100px;
    height: auto;
  }

컴포넌트에서는 아무것도 할 필요 없이 미디어 쿼리를 적용하고 싶은 태그 안에 @include 만 쓰면 된다!