Sass 프리 프로세서

Sass 스타일 문서 ▸ JS 파일에서 불러오기

일반적으로 다른 컴포넌트에서 동일한 CSS 클래스를 재사용하지 않는 것이 좋습니다. 예를 들어 다수의 React 컴포넌트 파일에서 동일한 .button CSS 클래스를 사용하는 대신, <Button> 컴포넌트(.button 클래스는 여기서만 사용)를 사용하는 것이 권장됩니다. 즉, <Button> 컴포넌트를 다른 컴포넌트에서 렌더링 하는 방법으로 재사용 하는 것입니다.

이러한 방법을 사용하면 믹스인, 중첩 규칙과 같은 기능이 컴포넌트 구성으로 대체되므로 Sass와 같은 CSS 프리 프로세서 사용의 유용성이 떨어집니다. 하지만 Sass가 유용하다고 생각한다면 CRA에 통합해 사용할 수 있습니다.

Sass 패키지 설치

sass 패키지를 프로젝트에 설치합니다.

npm i -D sass

CRA는 Sass 패키지가 설치되면 .s(a|c)ss 파일을 자동으로 컴파일 합니다. (사전 Webpack 설정에 의해)

CSS → Sass 파일

Sass를 사용한다면 CSS를 사용할 수도, 그렇지 않을 수도 있습니다. 만약 기존 CSS 파일 대신 Sass 파일로 대체해 사용하려면 기존의 CSS 파일 확장자를 .scss 로 변경해 호출합니다.

src/index.js
import './styles/index.scss'

NPM 패키지 불러오기

설치된 NPM 모듈에서 스타일 파일을 불러오려면 패키지 이름 앞에 ~을 붙이면 됩니다. 예를 들어 Sass 믹스인 패키지를 설치하고 불러올 경우 다음과 같이 사용할 수 있습니다. ( @euid/scss-mixins 활용 예시 )

@import '~@euid/scss-mixins'

Webpack 설정에 의해 "~" 기호를 사용하면 node_modules 디렉토리 안에서 모듈을 호출합니다.

SASS_PATH

환경 변수를 사용해 Sass 경로(path)를 설정하면 ~ 기호를 사용하지 않고도 스타일 모듈을 불러올 수 있습니다.

# Sass 경로 설정
# windows의 경우: SASS_PATH=./node_modules;./src 
SASS_PATH=node_modules:src

다음과 같이 작성한 경우 node_modules 또는 src 디렉토리를 기준으로 스타일 모듈을 불러오게 됩니다.

@import '@euid/scss-mixins' // node_modules/@euid/scss-mixins/index.scss 호출
@import 'styles/custom-colors.scss' // src/styles/custom-colors.scss 호출

node_modules, src 디렉토리 외 다른 디렉토리도 추가하고자 한다면 다음과 같이 작성 가능합니다.

SASS_PATH=node_modules:src:path1:path2

# windows의 경우
# SASS_PATH=./node_modules;./src;./path1;./path2

만약 SASS_PATH 설정이 정상 동작하지 않을 경우 sass 패키지 대신 node-sass 패키지를 사용하세요.

Sass 소스맵

Sass 관리 차원에서 분리 된 파일의 소스맵 (sourcemap)을 볼 수 없으면 매우 불편합니다. Sass 소스맵이 표시되도록 설정하려면 CRA의 eject 명령을 실행해 Webpack 설정을 수정해야 합니다. 하지만 eject 명령을 실행하면 다시 되돌릴 수 없으니 주의해야 합니다.

eject 명령 대신 CRACO를 사용하면 Sass 파일의 소스맵을 생성해 사용할 수 있습니다.

다른 해결책

CRACO 구성이 번거롭다면? 다음 스크립트 코드를 사용해 Sass 소스맵을 활성화 할 수 있습니다.

// File System 모듈 추출
const { writeFileSync, existsSync, readFileSync } = require('fs');

// react-scripts 패키지의 Webpack 구성 파일 경로
const path = 'node_modules/react-scripts/config/webpack.config.js';

// 찾을 sourceMap 문자 정규식
const find = /(sourceMap: isEnvProduction && shouldUseSourceMap)/g;
// 찾은 sourceMap 문자를 대신할 대체 문자
const replace = 'sourceMap: isEnvDevelopment && shouldUseSourceMap';

// path가 존재할 경우
if (existsSync(path)) {
  // path 코드 읽기
  const buffer = readFileSync(path)
    // 문자화
    .toString()
    // sourceMap 코드 대체 처리
    .replace(find, replace);
  
  try {
    // path를 buffer 데이터로 쓰기
    writeFileSync(path, buffer);
    console.info('enable-css-sourcemaps: 활성화 처리 됨');
  } catch (e) {
    // 오류 처리
    console.error(`enable-css-sourcemaps: ${path} 활성 처리 실패!`);
  }
} else {
  console.warn(`enable-css-sourcemaps: ${path} 존재 하지 않음!`);
}

package.json에 다음 NPM 스크립트를 추가한 다음 실행합니다.

"scripts": {
  "enable-sourcemap": "node ./scripts/enable-css-sourcemaps.js"
}
npm run enable-sourcemap
PreviousCSS 모듈 활용NextSass 모듈 활용

Last updated