간략하게 작성하였다.

scss를 사용하는 이유

• 학습의 목적 (지금까지 프로젝트는 css-in-js 환경에서 진행하였다. css-in-css를 적용해보고 싶어 결정)

• 상태에 따른 UI 스타일링이 바로 적용 (유저 인터랙션이 많은 어플리케이션의 경우 css-in-js 방식보다 효율적이다. -> 빠르게 UI스타일이 변경된다)

• 에디터를 이식할 부모 프로젝트의 환경을 고려 (업체 정보 입력 프로젝트가 css-in-css환경으로 작성되기 때문에 이를 고려하여 scss을 적용)

scss 적용하기

CRA 환경이 아니기 때문에 eject가 아닌 직접 config를 수정해주면 된다.

install

npm install node-sass style-loader css-loader sass-loader

sass-loader

Loads a Sass/SCSS file and compiles it to CSS.

style-loader

Creates style nodes from JS strings

css-loader

Translates CSS into CommonJS

webpack setting

웹팩 설정은 다음과 같이한다. module.rules 에 추가

로더 적용 순서가 있으므로, 다음과 같이 sass-loader -> css-loader -> style-loader 순으로 적용되도록 작성한다.

 {
 
 	test: /\.scss$/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
 
 },

sass-loader로 scss, sass파일을 css로 트랜스파일링하면 css loader가 이를 Common JS로 변환한다. 이를 style 태그로 삽입.

use scss

Button Component를 예시로 하나 만들어보자

// Button.tsx
import React from 'react';
import './style/Button.scss';
function Button() {
  return <button className="Button">this is button</button>;
}

export default Button;

$blue: #228be6; // 주석 선언

.Button {
  display: inline-flex;
  color: white;
  font-weight: bold;
  outline: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;

  background: $blue; // 주석 사용
  &:hover {
    background: lighten($blue, 10%); // 색상 10% 밝게
  }

  &:active {
    background: darken($blue, 10%); // 색상 10% 어둡게
  }
}

// EditorPage
import Button from '@/components/Button';
import React from 'react';

function EditorPage() {
  return (
    <div>
      <Button></Button>
    </div>
  );
}

export default EditorPage;

result

잘 적용되어있는 모습을 확인할 수 있다.

Ref

• webpack docs

• [velopert scss]

• [non cra setting]