Webpackを使って、Sassをコンパイルする方法 2017年4月版

Webpackを使って、Sassをコンパイルする方法 2017年4月版

Webpackを使って、Sassをコンパイルする方法 2017年4月版

Webpackを使って、Sassをコンパイルする方法 2017年4月版 へのコメントはまだありません

はじめに

Webpackを使って、Sassをコンパイルする方法です。
Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、
実際に動いた例を示しておきます。

末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。

コンパイル環境構築

こんな感じのフォルダツリーにsassがあると仮定します。
saas-1

webpack.configの調整

ルートフォルダに webpack.config.jsを以下のような内容で作成します。
目標は sassフォルダにある app.scssとsub.scssを dist/cssフォルダにapp.cssとsub.cssとして出力する。

動作環境(各モジュールのバージョン)

2017年4月現在で動いたのは以下のバージョンです。

コンパイル

こんな感じにファイルができていれば成功です。

saas-2

あとがき

sassだけをコンパイルしたいケースは少ないと思いますが、Reactなんかでアプリを作り
同時にsassもコンパイルしたいケースなんかに webpack.config.js をどう設定するかという
ことで悩んだりしますよね。

ES6とかとのコンパイルと組み合わせたい場合は、

の部分を配列定義に変えてやって、

としてやってください。

Reactで ES6をノーマルなJavaScriptに変換するときの webpack.config.jsの設定は
こちらの記事を参考にしてみてください。


About the author:

Related Posts

Leave a comment

Back to Top