CSS 미디어쿼리 스플리팅

MediaQuery 플러그인

특정 미디어를 구분해 스타일링 하는 CSS 미디어쿼리 구문이 포함된 CSS 파일이, 모바일 또는 데스크톱 사용자 환경에서 모두 읽히는 것은 비 효율적입니다. 모바일 사용자는 모바일 스타일만, 데스크톱 사용자는 데스크톱 스타일만 적용되어야 하지 않을까요?

그렇게 생각한다면 MediaQueryPlugin 플러그인을 사용해보세요. 이 플러그인을 사용하면 작성된 CSS 코드에서 미디어쿼리를 추출해 비동기(Async) 로드 할 수 있도록 만들어 줍니다.

예를 들어 다음과 같은 스타일 코드를 작성했을 때 모바일 환경에서 미디어쿼리 구문은 필요하지 않습니다.

.sentence { color: #2e2d10; }

@media (min-width: 64em) {
  .sentence { color: #26cb7c; }
}

.context { font-size: 1.2rem; }

모바일 환경에 최적화 된 스타일 코드는 아래처럼 작성되어야 합니다.

.sentence { color: #2e2d10; }
.context { font-size: 1.2rem; }

반면 데스크톱 환경에서 접속했다면? 다음 코드를 비동기 방식으로 가져오면 효과적일 것입니다.

@media (min-width: 64em) {
  .sentence { color: #26cb7c; }
}

패키지 설치 & 로더 구성

media-query-plugin 패키지를 설치한 후, Webpack 구성 파일을 열어 로더, 플러그인 구성을 설정합니다.

npm i media-query-plugin -D

const MediaQueryPlugin = require('media-query-plugin');

module.exports = {
  module: {
    rules: [
      // 1. 로더 설정
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          MediaQueryPlugin.loader, /* MediaQueryPlugin 로더 설정 */
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  
  plugins: [
    // 2. 플러그인 설정
    new MediaQueryPlugin({
      // 생성 될 파일 이름 [name][query].scss 설정
      include: [ 'style' ],                        // [name]
      queries: { '(min-width: 60em)': 'desktop' }  // [query]
    })
  ]
}

플러그인에 의해 추출된 CSS를 가져 올 경우(동적 가져오기), Webpack은 동적으로 가져오기를 시도하고 파일이 없으면 오류를 발생시킵니다. 그러므로 Webpack을 실행하기 전에 해당 파일을 손수 만들어야 합니다. (빈 파일, 코드 자동 생성)

import './style.scss';

if (window.innerWidth >= 960) {
    import(/* webpackChunkName: 'style-desktop' */ './style-desktop.scss');
}

앞서 언급했듯이 생성할 파일 이름은 구성 파일에 등록된 패턴을 따라야 합니다.

// 이름 패턴: [name]-[query].scss
'style-desktop.scss'

CSSMQPacker 플러그인

CSSMQPackerPlugin은 PostCSS를 사용하여 동일한 CSS 미디어쿼리(Media Query) 규칙을 하나로 압축하는 Webpack 플러그인입니다.

npm i css-mqpacker-webpack-plugin -D

const CSSMQPackerPlugin = require('css-mqpacker-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: isDevMode ? false : true,
    minimizer: [
      // 플러그인 인스턴스 생성
      new CSSMQPackerPlugin({
        sort: true // 정렬 활성화
      }),
    ],
  },
}

미디어 쿼리 병합을 테스트 할 간단한 스타일 코드를 준비합니다. 실습 파일(sass, scss) 파일을 테스트 해봅니다.

@use '../../styles/config' as *

/* --------------------------------------------------------------------------

.button
  box-shadow: 0 2px 0 getColor(shadow, $theme)

  @media (min-width: getBreakpoint(sm))
    box-shadow: none

@use '../../styles/config' as *;

@include setTheme(dark);

/* -------------------------------------------------------------------------- */

.button {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  padding: 0.6em 0.94em;
  background: getColor(bg, $theme);
  color: getColor(fg, $theme);

  @media (min-width: getBreakpoint(sm)) {
    border-radius: 2px;
  }

  @media (min-width: getBreakpoint(md)) {
    border-radius: 0;
  }
}

@use 'sass:map';

/* -------------------------------------------------------------------------- */

// 컬러 맵(Map) 변수
$colors: (
  light: (
    bg: #efefef,
    fg: #010101,
    shadow: #8f8f8f,
  ),
  dark: (
    bg: #111,
    fg: #fff,
    shadow: #737373,
  ),
);

// 중단점 맵 변수
$breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 960px,
  xl: 1024px,
  2xl: 1280px,
  3xl: 1440px,
  4xl: 1980px,
);

/* -------------------------------------------------------------------------- */

// 중단점 값 가져오기 함수
@function getBreakpoint($keyword) {
  @return map.get($breakpoints, $keyword);
}

// 컬러 값 가져오기 함수
@function getColor($color-name, $theme: light) {
  $theme: map.get($colors, $theme);
  @return map.get($theme, $color-name);
}

/* -------------------------------------------------------------------------- */

// 테마 설정 믹스인
@mixin setTheme($theme) {
  $theme: $theme !global;
}

/* -------------------------------------------------------------------------- */

// 기본 테마 변수
$theme: light !default;