webpackでSassのコンパイル

webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。
挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略!

  • 環境構築がシンプル
  • WebAppを作るのに向いているらしい
  • モジュールごとに分かれているJavascriptを1このファイルにまとめられる

webpack自体については、既出のしっかりした記事が検索すればたくさん見つかりますので、そちらを参考にしてください。

現状のクライアントワークは、HTML+CSSでのコンテンツ制作をベースにJavascriptでの機能実装がほとんどなので
まずはHTML+CSSの快適さが気になる。
使用頻度の高いSassのコンパイル環境を作る手順を調べてみました。

過去の苦い経験から、納品後にちょっと手を加えたいからCSSの触りかたと場所を教えて…という連絡がないこともないので
webpackを使用しますが、SassはJavascriptではなくCSSとして書き出せるようにします。

参考記事:
Webpackで Browsersync + Sassコンパイルを試す
webpackを使ってsassをコンパイルできるようにしよう!

なお、私の記事は覚書と感想のようなものなので
環境構築の手順やポイントは参考記事のほうがためになります。どうもありがとうございました。

インストール

webpackを使うには、node.jsが必要です。
ない場合はインストールします。

Windowsの場合は、公式サイトにインストーラがあります。
Macはターミナルのコマンドラインでインストールできます。

webpackは、npmのコマンドでインストールできます。

<br />
$ sudo npm install webpack -g<br />

これで下準備ができた。

ワークスペースとなるディレクトリ

他の必要ライブラリは、作業スペースとなるプロジェクトごとのディレクトリにインストールします。

今回はこのように設置しました。

workspace
├ html
│ ├ assets
│ │ └ css
│ │   └ (ここにコンパイルされたCSSが入る)
│ └ index.html
└ src
└ sass
└ common.scss

コマンドラインで、このworkspaceディレクトリをルートとし、プロジェクトをインストールしていきます。

とりあえず、package.jsonを作成。

<br />
$ npm init<br />

インストールするプラグインは、とりあえず参考記事とまったく同じものにしました。
(コマンドをここに丸写しするのも変な感じなので、リンク置いときます…)
Webpackで Browsersync + Sassコンパイルを試す

webpack.config.js

webpackの設定ファイルです。
参考記事のものより少し削ってあります。

<br />
var path = require('path');<br />
var ExtractTextPlugin = require('extract-text-webpack-plugin');</p>
<p>module.exports = {<br />
	entry: {<br />
		common: './src/sass/common.scss'<br />
	},<br />
	output: {<br />
		path: path.join(__dirname, 'html/assets/css'),<br />
		filename: '[name].css'<br />
	},<br />
	module: {<br />
		loaders: [<br />
			{<br />
				test: /\.scss$/,<br />
				loader: ExtractTextPlugin.extract(&quot;style-loader&quot;, &quot;css-loader!sass-loader&quot;)<br />
			}<br />
		]<br />
	},<br />
	plugins: [<br />
		new ExtractTextPlugin('[name].css')<br />
	]<br />
};<br />

これだと、このようにCSSを出力してくれます。

/src/sass/common.scss

/html/assets/css/common.scss

webpack.config.jsを用意してからコマンドを実行すると、Sassのコンパイルを実行してくれます。

<br />
$ webpack<br />

ファイルの更新を検知して自動コンパイルしてくれるようにするなら、watch付きで。

<br />
$ webpack --watch<br />

これは確かにシンプルだ。
参考記事をそのままなぞったというのは、まああるのですが、確かに導入手順はシンプルだと感じました。

複数のCSSを置きたい

しかし、全コンテンツで使うCSSを1つのファイルにまとめるのがあまり好きではないので
common.cssしか置けないこの状況はこまります。

できます。
entryのところに追加したらできました。

<br />
	entry: {<br />
		common: './src/sass/common.scss',<br />
		test: './src/sass/test.scss'<br />
	},<br />

こうすると、test.scss → test.css も作られました。
そして、出力されるCSSの名前がプロパティ(key)だったのに気づくまで、ちょっと時間がかかりました。(英語音痴)

複数も指定できるんだ。

………ん???
まさか1組ずつ手作業で指定?

compassのように、scssファイルが増えたら同じ名前でCSSを作ってくれる機能はないようです。
(それか私が見つけられないだけなのだろうか…)

感想

さわりだけでしたが
残念ながら、私の開発スタイルとは相性が悪いかもしれない。

納品した後で、リテラシーの異なる同業者の方やお客様が全く編集できなくてもよいというのが確定しているクライアントワークでなら、使用できそうです。

Sassのコンパイルに使うなら、gulpやcompassだけでもシンプルで良いような気がしています。

導入は確かに簡単でした。
日本語の解説が少ない割にはスムーズにいけました。
最も苦戦したところは、出力されるファイルの名前がプロパティ(key)だったのに気づくところでしょうか(恥)

今回の記事では触れていませんが、Vue.jsなどの外部モジュールが使えるところはかなり気になっています。
これでJavascriptの実装部分が快適になるかどうか、もう少し調査してみたいです。
gulp-webpackというのもあるので
その気になれば、Sassはgulpにお任せしてJavascriptはwebpackでというのもありかもしれないし。

参考:
webpack で始めるイマドキのフロントエンド開発

関連記事