# Sass 로더
## Sass + Sass Loader 구성
[sass](https://www.npmjs.com/package/sass), [sass-loader](https://www.npmjs.com/package/sass-loader) 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.
{% tabs %}
{% tab title="패키지 설치" %}
```bash
npm i sass sass-loader -D
```
{% endtab %}
{% tab title="webpack.config.js" %}
```javascript
module.exports = {
module: {
rules: [
// Sass 파일 로더 설정
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
}
```
{% endtab %}
{% endtabs %}
## Button 컴포넌트 스타일링
컴포넌트를 스타일링 하는 `style.scss`, `button.sass` 파일을 만든 후, Button 컴포넌트 파일 안에서 스타일 파일 모듈을 불러옵니다.
{% tabs %}
{% tab title="src/components/Button/style.scss" %}
```css
@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);
}
```
{% endtab %}
{% tab title="src/components/Button/button.sass" %}
```css
@use './style.scss' as Button
/* --------------------------------------------------------------------------
.button
box-shadow: 0 2px 0 Button.getColor(shadow, Button.$theme)
```
{% endtab %}
{% tab title="src/components/Button/index.js" %}
```javascript
import './style.scss'
import './button.sass'
```
{% endtab %}
{% endtabs %}
## 모듈 번들링
`bundle` NPM 명령을 실행해 모듈을 번들링 합니다.
```bash
npm run bundle
```
웹 브라우저 개발 도구 Elements 패널을 확인해보면 HTML 문서의 \ 영역에 인터널(internal) 스타일 방식으로 스타일 코드가 추가되어 \ 요소를 스타일링 하는 것을 확인할 수 있습니다.
{% hint style="info" %}
JavaScript 파일에서 불러오는 스타일 파일마다 \