Sass + Sass Loader 구성
sass , sass-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.
패키지 설치 webpack.config.js
Copy npm i sass sass-loader -D
Copy module . exports = {
module : {
rules : [
// Sass 파일 로더 설정
{
test : /\.s[ac]ss $ / i ,
use : [ 'style-loader' , 'css-loader' , 'sass-loader' ]
}
]
}
}
Button 컴포넌트 스타일링
컴포넌트를 스타일링 하는 style.scss
, button.sass
파일을 만든 후, Button 컴포넌트 파일 안에서 스타일 파일 모듈을 불러옵니다.
src/components/Button/style.scss src/components/Button/button.sass src/components/Button/index.js
Copy @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 : 4 px ;
padding : 0.6 em 0.94 em ;
background : getColor(bg , $theme );
color : getColor(fg , $theme );
}
Copy @use './style.scss' as Button
/* --------------------------------------------------------------------------
.button
box-shadow: 0 2px 0 Button.getColor(shadow, Button.$theme)
Copy import './style.scss'
import './button.sass'
모듈 번들링
bundle
NPM 명령을 실행해 모듈을 번들링 합니다.
웹 브라우저 개발 도구 Elements 패널을 확인해보면 HTML 문서의 <head> 영역에 인터널(internal) 스타일 방식으로 스타일 코드가 추가되어 <button/> 요소를 스타일링 하는 것을 확인할 수 있습니다.
JavaScript 파일에서 불러오는 스타일 파일마다 <style> 코드를 만들어 냅니다.
소스맵 설정
앞서 웹 브라우저에서 결과를 확인했듯이 Sass를 사용해 스타일 모듈을 관리해도 번들링 되면 코드의 출처를 알 수 없어 스타일 디버깅이 어렵습니다. 이러한 문제를 해결하려면 소스 파일의 맵 파일을 생성해야 합니다. CSS, Sass 로더에 각각 sourceMap
설정 값을 true
로 설정하면 번들링 과정에서 소스맵을 만들어 스타일 디버깅 하기 쉽습니다.
webpack.config.js
Copy 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 패널에서 작성된 스타일 코드를 확인할 수 있어 디버깅이 한층 쉽습니다.
참고