scss

Syntactically Awesome StylesheetS 의 준말로 기존 css보더 더 편하게 스타일링 할 수 있는 언어다. css에 있는 모든 기능을 포함하고 여기에 더해 변수랑 내부에서 제공하는 함수도 사용할 수 있기 때문에 개발자들의 반복적인 작업을 확 줄여준다. 5년 전에 간단히 홈페이지 만들면서 css를 쓰고 불편하다고 느낀후 지금까지 손댄적이 없었는데 지금은 scss 라는 언어로 더 쉽게 스타일링 할 수 있게 된 것 같다. 이번포스트에서는 scss를 react에 적용하는 방법을 간단히 소개한다.

 

1. scss 로더 추가 

 

scss는 확장 기능이므로 새로 css로 transformation 해주는 기능이 필요하다. 별도의 로더를 설치하고 스크립트를 실행할 수 있으나 여기선 webpack에 로더를 추가해서 정리하려고 한다. 먼저 아래 명령어로 필요한 라이브러리를 추가한다.

 

yarn add style-loader css-loader sass-loader node-sass

 

그리고 webpack.config.js에 css, scss 용 로더를 추가한다.

 

module.exports = {
    ...
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]

 

2. scss 파일 추가 

 

scss로 쓸 파일을 추가한다. scss 언어 내에 import 기능이 있어 여러 개의 파일로 의존성이 가능하다. 최상위 파일로 styles.scss 을 만들고 예시로 base 폴더 내에 base.scss 파일을 추가한다.

 

styles.scss

 

@import './base/base';

 

base.scss

 

간단하게 브라우저 전체에 적용될 수 있는 스타일링을 넣었다.

 

body {
    background: $dark-blue;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2.4rem;
}

 

3. entry 파일에서 임포트 

 

entry에 해당하는 파일에서 아까 추가한 scss 파일을 임포트 한후 간단한 코드를 넣어 봤다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/styles.scss';

ReactDOM.render(<div><h1>This is selfish-developer blog</h1></div>, document.getElementById('app'))

 

그 결과 아래처럼 스타일링이 된 것을 확인 할 수 있다.