2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
Webpack + React 그리고 SCSS 컴파일해서 CSS 넣기

모듈 설치

cmd를 실행해서 프로젝트 디렉토리로 이동하여 npm으로 모듈들을 설치하자.

이제 아래 두가지 방식 중 선택하여 작업한다.
1. .css 파일을 뽑아내지 않고 React에 담는 방식
2. .css 파일을 따로 만들어서 직접 html 안에 담는 방식 (<link rel=”stylesheet” … > 태그로 흔히 우리가 기본적으로 사용하는 그 방법)

1번 방식은 React를 webpack으로 빌드하고 난 후 js들을 서버에 올려서 웹사이트를 열면 <head></head> 태그 안에 맨 마지막에 scss를 컴파일한 css 들이 들어가 있다.

2번 방식은 webpack으로 빌드하면 지정 파일로 scss가 css로 컴파일되어 파일로 만들어져 나온다.


방식을 정했으면 webpack.config.js 를 수정하자.

1번 방식은 아래처럼 모듈에 로더를 추가하면 된다.


2번 방식은 한 과정이 더 있다.

모듈을 하나 더 설치해야한다.

웹팩에 쓰이는 플러그인으로 자세한 정보는 https://github.com/webpack-contrib/extract-text-webpack-plugin 여기다.
설치했으면 webpack.config.js 에 모듈을 임포트하는 코드를 넣는다.

아래 코드로 모듈에 로더를 추가하면 된다.

1번 방식과는 다르게 plugins도 추가하여 저장할 위치를 정의한다.


그리고 컴파일할 scss는 리액트로 만드는 js 안에서 import 한다.

이런 식으로 불러오면 App.scss가 css로 파일이 만들어지거나 reactjs 안에 담겨서 빌드 된다.


아래는 지금 내가 사용하는 webpack.config.js 설정 파일이다.
복붙으로 종종 사용하고 필요에 따라 주석 설정하여 scss를 설정한다.

 

HoldHolic

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.