Webpack 러닝 가이드
  • Webpack 모듈 번들러
  • Web Modules
    • Legacy 모듈 관리
    • ES 모듈 관리
  • Babel
    • Babel JavaScript 컴파일러
    • Babel 독립형 빌드
    • Babel 노드 (Node.js) ✘
    • Babel CLI 구성
    • Babel 플러그인
  • webpack
    • Webpack 개발 환경 구성
      • Webpack 설치
      • Webpack 통합
      • Webpack 구성 파일
      • Webpack 워치
      • Webpack 모드
      • Webpack 별칭 등록
      • Webpack 호환성
      • Webpack 개발 서버
      • Webpack 멀티 페이지 설정
    • Webpack 로더
      • File 로더
      • CSS 로더
      • PostCSS 로더
      • Sass 로더
      • Babel 로더
      • TypeScript 로더
    • Webpack 플러그인
      • 환경 변수 등록
      • 빌드 결과 자동 정리
      • 빌드 결과 자동 주입
      • CSS 파일 개별 추출
      • CSS 파일 크기 최적화
      • CSS 미디어쿼리 스플리팅
      • 이미지 파일 크기 최적화
  • React
    • React App 매뉴얼 구성
      • Webpack 초기 구성
      • Babel 컴파일러 구성
      • CSS 스타일 구성
      • 이미지 구성
      • 환경변수 플러그인
      • HTML 플러그인
      • 최적화 구성
      • 코드 스플리팅
      • 개발 서버
      • 이미지, 폰트 에셋 구성
      • 환경 변수 + HTML 구성
      • 빌드 최적화 구성
      • 빌드 자동 정리 구성
      • 개발 서버 구성
      • 폴리필 구성
Powered by GitBook
On this page
  • Sass + Sass Loader 구성
  • Button 컴포넌트 스타일링
  • 모듈 번들링
  • 소스맵 설정
  • 참고

Was this helpful?

  1. webpack
  2. Webpack 로더

Sass 로더

PreviousPostCSS 로더NextBabel 로더

Last updated 4 years ago

Was this helpful?

Sass + Sass Loader 구성

, 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.

npm i sass sass-loader -D
module.exports = {
  module: {
    rules: [
      // Sass 파일 로더 설정
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

Button 컴포넌트 스타일링

컴포넌트를 스타일링 하는 style.scss, button.sass 파일을 만든 후, Button 컴포넌트 파일 안에서 스타일 파일 모듈을 불러옵니다.

@use 'sass:map';

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

// 컬러 값 가져오기 함수
@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;

// 테마 설정 믹스인 포함(호출)
@include setTheme(dark);

.button {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  padding: 0.6em 0.94em;
  background: getColor(bg, $theme);
  color: getColor(fg, $theme);
}
@use './style.scss' as Button

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

.button
  box-shadow: 0 2px 0 Button.getColor(shadow, Button.$theme)
import './style.scss'
import './button.sass'

모듈 번들링

bundle NPM 명령을 실행해 모듈을 번들링 합니다.

npm run bundle

웹 브라우저 개발 도구 Elements 패널을 확인해보면 HTML 문서의 <head> 영역에 인터널(internal) 스타일 방식으로 스타일 코드가 추가되어 <button/> 요소를 스타일링 하는 것을 확인할 수 있습니다.

JavaScript 파일에서 불러오는 스타일 파일마다 <style> 코드를 만들어 냅니다.

소스맵 설정

앞서 웹 브라우저에서 결과를 확인했듯이 Sass를 사용해 스타일 모듈을 관리해도 번들링 되면 코드의 출처를 알 수 없어 스타일 디버깅이 어렵습니다. 이러한 문제를 해결하려면 소스 파일의 맵 파일을 생성해야 합니다. CSS, Sass 로더에 각각 sourceMap 설정 값을 true 로 설정하면 번들링 과정에서 소스맵을 만들어 스타일 디버깅 하기 쉽습니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss/i,
        use: [
          'style-loader',
          // css-loader 소스맵 옵션 활성화
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          // sass-loader 소스맵 옵션 활성화
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
}

번들링 후, 웹 브라우저 Elements 패널을 보면 작성한 스타일 파일의 출처를 정확하게 확인할 수 있습니다. 😎

스타일 파일 출처 링크를 클릭하면 Sources 패널에서 작성된 스타일 코드를 확인할 수 있어 디버깅이 한층 쉽습니다.

참고

sass
sass-loader
sass-loader | webpackwebpack
Logo