Webpackで React(ES6)+SASS(SCSS) をコンパイルして開発する最小限の環境を作る

Webpackで React(ES6)+SASS(SCSS) をコンパイルして開発する最小限の環境を作る

Webpackで React(ES6)+SASS(SCSS) をコンパイルして開発する最小限の環境を作る

Webpackで React(ES6)+SASS(SCSS) をコンパイルして開発する最小限の環境を作る へのコメントはまだありません

はじめに

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

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

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

wp-1

作業フォルダ作成

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

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

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

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

index.js

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

components/App.js

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

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

dist/index.html

SASSのファイル

sass/style.scss

webpack.config.js

webpack.config.js

ES6、SCSSコンパイル

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

wp-1

package.jsonの調整

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

動作検証

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

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


About the author:

Related Posts

Leave a comment

Back to Top