모듈 설치
npm install --save-dev style-loader css-loader sass-loader node-sass
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번 방식은 아래처럼 모듈에 로더를 추가하면 된다.
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style-loader","css-loader?-minimize","sass-loader?outputStyle=compressed"],
exclude: /node_modules/
}
]
}
2번 방식은 한 과정이 더 있다.
모듈을 하나 더 설치해야한다.
npm install --save-dev extract-text-webpack-plugin
웹팩에 쓰이는 플러그인으로 자세한 정보는 https://github.com/webpack-contrib/extract-text-webpack-plugin 여기다.
설치했으면 webpack.config.js 에 모듈을 임포트하는 코드를 넣는다.
var ExtractTextPlugin = require('extract-text-webpack-plugin');
아래 코드로 모듈에 로더를 추가하면 된다.
module: {
loaders: [
{
test: /\.scss$/,
loaders : ExtractTextPlugin.extract({
fallback : 'style-loader',
use : ['css-loader', 'sass-loader?outputStyle=expanded']
}),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('./css/파일명.css')
]
1번 방식과는 다르게 plugins도 추가하여 저장할 위치를 정의한다.
그리고 컴파일할 scss는 리액트로 만드는 js 안에서 import 한다.
import '../scss/App.scss';
이런 식으로 불러오면 App.scss가 css로 파일이 만들어지거나 reactjs 안에 담겨서 빌드 된다.
아래는 지금 내가 사용하는 webpack.config.js 설정 파일이다.
복붙으로 종종 사용하고 필요에 따라 주석 설정하여 scss를 설정한다.
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './React/js/index.js',
output: {
path: __dirname,
filename: './js/ReactBundle.js'
},
devServer: {
hot: true,
inline: true,
host: '0.0.0.0',
port: 4000,
contentBase: __dirname,
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot-loader',
'babel-loader?' + JSON.stringify({
cacheDirectory: true,
presets: ['es2015','stage-0', 'react']
})],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders : ExtractTextPlugin.extract({
fallback : 'style-loader',
use : ['css-loader', 'sass-loader?outputStyle=expanded']
}),
// loaders: ["style-loader","css-loader?-minimize","sass-loader?outputStyle=compressed"],
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('./css/main_fromwebpack.css'),
new webpack.HotModuleReplacementPlugin()
]
}