[React] 리액트에 Sass 연결하기

Sass 패키지 설치하기

cd (폴더명)
yarn add node-sass

버전 호환 오류

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

다음과 같이 Node Sasss 버전 에러가 나면 아래처럼 하면됩니다.

1. 리액트 서버 중지

2. Node Sass 버전 삭제 npm uninstall node-sass

3. npm install node-sass@4.14.1 명령어 입력

4. 다시 서버시작

이렇게 했는데도 에러가 발생한다면 아래 링크를 참고 바랍니다.

Node sass 버전호환

Sass를 활용해 Button 컴포넌트 만들기

Button.js

import React from 'react';
import classNames from 'classnames';
import './Button.scss';

function Button({ children , size , color , outline , fullWidth }) {
    return <button className={classNames('Button' , size , color , {outline , fullWidth})}>
        {children}</button>;
} 

Button.defaultProps = {
    size: 'medium',
    color: 'blue'
};  

export default Button;

조건부로 css 클래스를 넣어주고 싶을때, 문자열을 직접 조합하는것보다 "classNames" 라는 라이브러리를 사용하는 것이 더 편할 것입니다. 이로써 props로 받은 props값이 button 태그의 className으로 전달됩니다.

defaultProps 속성을 통해 데이터의 기본값을 미리 설정합니다. 사이즈는 미디움으로, 색상은 파란색을 기본으로 설정합니다.

(classNames 라이브러리 설치는 "yarn add classnames" 명령어를 입력하면 됩니다. classNames 라이브러리에 자세한것은 아래 글을 참고하세요.)

className라이브러리

Button.scss

$blue: #228be6;
$gray: #495057;
$pink: #f06595;

.Button{
    display: inline-flex; color: white; height: 2.25rem; padding-left: 1rem; 
    padding-right: 1rem; font-weight: bold; outline: none; font-size: 1rem; 
    border-radius: 4px;border: none; cursor: pointer; align-items: center;
    background: $blue;
    &:hover{background: lighten($color: $blue, $amount: 10%); transition: 0.5s;}

    //사이즈 관리
    &.large{height: 3rem; padding-left: 1rem; font-size: 1.25rem; }
    &.medium{height: 2.25rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; align-items: center;}
    &.small{height: 1.75rem; font-size: 0.875rem; padding-left: 1rem; padding-right: 1rem; align-items: center;}
    @mixin button-color($color) {
        background: $color;
        &:hover {
          background: lighten($color, 10%);
        }
        &:active {
          background: darken($color, 10%);
        }
        &.outline {
          color: $color;
          background: none;
          border: 1px solid $color;
          &:hover {
            background: $color;
            color: white;
          }
        }
      }
    &.blue {@include button-color($blue);}
    &.gray {@include button-color($gray);}
    &.pink {@include button-color($pink);}
    & + & {margin-left: 1rem;}
    &.fullWidth{
        width: 100%; justify-content: center;
        & + & {margin-left: 0; margin-top: 1rem;}
    }
}

코드 상단에서 색상 변수를 선언해주었고, css 클래스에 따라 다른 색상이 적용되도록 반복되는 코드들을 mixin을 통해 정리하였습니다.
맨 아래 & + &은 .Button + .Button을 의미합니다.

App.js

import React, { Component } from 'react';
import './App.scss';
import Button from './components/Button';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="buttons">
          <Button size="large">BUTTON</Button>
          <Button>BUTTON</Button>
          <Button size="small">BUTTON</Button>
        </div>
        <div className="buttons">
          <Button size="large" color="gray">BUTTON</Button>
          <Button color="gray">BUTTON</Button>
          <Button size="small" color="gray">BUTTON</Button>
        </div>
        <div className="buttons">
          <Button size="large" color="pink">BUTTON</Button>
          <Button color="pink">BUTTON</Button>
          <Button size="small" color="pink">BUTTON</Button>
        </div>
        <div className="buttons">
          <Button size="large" color="blue" outline>BUTTON</Button>
          <Button color="gray" outline>BUTTON</Button>
          <Button size="small" color="pink" outline>BUTTON</Button>
        </div>
        <div className="buttons">
          <Button size="large" color="blue" fullWidth>BUTTON</Button>
          <Button color="gray" fullWidth>BUTTON</Button>
          <Button size="small" color="pink" fullWidth>BUTTON</Button>
        </div>
      </div>

    );
  }
}

export default App;

Button.js에서 설정한 클래스들을 App.js에 써주면 다음과 같은 결과가 나오게 됩니다.