electron + webpack + sass

electronアプリを、react、reduxを使って作ってみようと考えて調べていると、webpackを使った例を結構な頻度で目撃しました。 このwebpackを使って、sassをwebpackでコンパイルして、electronアプリに食わせるとこまでやってみました。

electron + webpack + sass

electronにしてもそうじゃないにしても、sassをコンパイルしてHTMLファイルに引き込む、というのがゴールになると思う。 webpackでCSSをバンドルする場合、通常JSとして扱うことになる(tutorials/getting-started)ようだが、ここでは、sassをコンパイルしてcssファイルとして出力する方法を試した。

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

次のパッケージをnpmでインストールした。

electronアプリを作るために、

• electron

webpackを使うために、

• webpack

webpackでcss、sassを扱うために、

• css-loader
• style-loader
• sass-loader
• extract-text-webpack-plugin
• node-sass

ディレクトリ構成

本来は、electronのアプリを作るためのJavascriptソースをどういうディレクトリ構成で配置するか、まで考えたいけど、そこまで整理できないので、あくまでsassのことだけ考えて次のような構成にしてみた。

.
├── build
│   └── css
├── index.html
├── index.js
├── node_modules
├── package.json
└── src
   └── sass
       └── main.scss

webpack.config.js

次に、webpack.config.jsを作ってみる。 src/sass/main.scssをコンパイルして、build/css/style.cssに出力する、という内容としてみた。

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = [
  {
    entry: {
      style: './src/sass/main.scss'
    },
    output: {
      path: path.join(__dirname, 'build/css'),
      filename: '[name].css'
    },
    module: {
      loaders: [
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin("[name].css")
    ]
  }
];

webpackでコンパイル

webpackコマンドでコンパイルすると、確かにbuild/css/style.cssとして出来上がっている。

% ./node_modules/webpack/bin/webpack.js
% ls build/css
style.css

このbuild/css/style.cssをindex.htmlに引き込めばよい。

参考

• tutorials/getting-started
• webpackを使ってsassをコンパイルできるようにしよう！ - Qiita

正直electronはどうでもいいっていう内容になってしまいました・・・

モダンなフロントエンド開発は込み入っていますね・・・