はじめに

ReactでSPAを作るようになりました。
Webpackで開発環境を作るわけですが、Reactの ES6(JSX)をコンパイルして、
デザイナーさんから上がってきたSASS(SCSS)をコンパイルしたい。
Webで探してもぴったりくる情報が少なかったので、両方のコンパイルが出来て、
テストできる最小限の環境を作る方法を記載してみます。

出来上がりのファイルツリーのイメージ

だいたいこんなイメージで・・・
成果物がdist配下に配置される感じですね。

作業フォルダ作成

[bash]
$ mkdir sass_react
$ cd sass_react/
$ npm init -y
[/bash]

パッケージのインストール

npmで必要なパッケージをインストールします。

[bash]
$ npm install –save react react-dom
$ npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server
$ npm install –save-dev webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass file-loader
[/bash]

エントリーポイントとなるJavaScript作成

scssをインポートするところがポイントです。

index.js
[bash]
import React from “react”
import {render} from “react-dom”
import App from “./components/App”
//scssのコンパイル
import “./sass/style.scss”

document.write(“

“);

render (
,
document.getElementById(“root”)
)

[/bash]

アプリ画面のトップページ作成

components/App.js
[bash]
import React from “react”

const App = () => {
return (

)
}

export default App

[/bash]

エントリーポイントとなるHTML

./main.css　や ./main.bundle.js
というような相対パスではなく、絶対パスで書くことがポイント！
（react routerなどで、パラメーターを渡したパスを起動するときに、エラーが出てハマりますので・・・）

dist/index.html
[bash]

[/bash]

SASSのファイル

sass/style.scss
[bash]
div.contents{
margin-top: 30px;
div.menus {
padding: 20px;
label {
background-color: #45cc77;
}
}
}

[/bash]

webpack.config.js

webpack.config.js
[bash]
var path = require(‘path’);
var webpack = require(‘webpack’);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {
entry: {
main: ‘./index.js’,
},
output: {
path: path.join(__dirname, ‘dist’),
filename: “[name].bundle.js”
},
module: {
loaders: [
{
test: /\.js[x]?$/,
loader: ‘babel-loader’,
exclude: /node_modules/,
query: {
presets: [‘es2015’, ‘react’]
}
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
loader: “file-loader?name=images/[name].[ext]”
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(‘css-loader!sass-loader’),
},
]
},
plugins: [
new ExtractTextPlugin({ filename: ‘[name].css’, allChunks: true }),
],
resolve: {
extensions: [‘.js’, ‘.jsx’]
},
devServer: {
inline: true,
hot: true
}
}

[/bash]

ES6、SCSSコンパイル

[bash]
$ ./node_modules/.bin/webpack
[/bash]

distフォルダ配下に main.bundle.jsとmain.cssが出来ていれば成功です。

package.jsonの調整

scriptsのところに startとbuildを追加
package.json
[bash]

{
“name”: “sass_react”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “webpack-dev-server –content-base dist/ –hot –inline –progress –colors”,
“build”: “webpack –progress –colors”
},

[/bash]

動作検証

[bash]
$ npm start
[/bash]

ブラウザーで “http://localhost:8080”

で、以下のようなページが表示されれば、ES6のコンパイルとSCSSのコンパイルは成功です。