この記事は、electron-forgeで作成したアプリケーションにおいて、CSSをSass/SCSS化する手順を記録、共有するためのものです。
Electronアプリケーションは、UIをWebブラウザで描画します。アプリケーションが複雑になるのにあわせて、CSSが肥大化しメンテナンスが難しくなります。Sass/SCSSを使えばアプリケーションのメンテナンス性を維持できます。
また、electron-forgeはwebpackを使ってアプリケーションをバンドルしています。Sass/SCSSをサンプルとして、この仕組みを理解すれば、好きなloaderをelectron-forgeに組み込めます。
この記事はすでにElectronで開発をしているユーザーに向けて書かれています。そのため、Electron自体の解説やインストール、開発環境構築に関する内容は取り扱いません。
バージョンが異なる場合、この記事の内容はそのまま適用できない場合があります。お手元の環境のバージョンを確かめてからお読みください。
webpackオプションを指定してcreate electron-appコマンドを実行すると、electron-forgeはwebpackを組み込み済みのアプリケーションを生成します。
yarn create electron-app my-new-app --template=webpack
~~~~~~~~~~~~~~~~~~
create electron-appコマンド後、メインプロセスとレンダラープロセス用のwebpack設定ファイルが生成されます。rulesとpluginsは2つのプロセスの共通設定です。
このwebpack設定ファイルを修正することで、好きなプラグインやローダーをelectron-forgeに組み込めます。
レンダラープロセス用のwebpack設定に、sass-loaderを組み込みます。
sass-loaderをインストールします。sass-loaderにはDart Sassが必要なため、Dart Sassのnpmパッケージsassも同時にインストールします。
yarn add -D sass-loader sass
webpack.renderer.config.jsを編集します。この設定がレンダラープロセス用のスクリプトファイルをバンドルしています。
▼webpack.renderer.config.js
const rules = require("./webpack.rules");
rules.push(
{
test: /\.css$/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }],
}
);
webpack.rules.jsから読み込んだ共通ルールに、CSSローダーを追加しています。ここにsass-loader用のルールを追加します。
ルールの追加方法はsass-loaderのREADMEを参照します。
▼webpack.renderer.config.js
const rules = require("./webpack.rules");
rules.push(
{
test: /\.css$/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }],
},
{
test: /\.s[ac]ss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" },
],
}
);
webpackの処理対象となる拡張子を設定に追加します。
▼webpack.renderer.config.js
module.exports = {
...
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".scss", ".sass"],
^^^^^^^^^^^^^^^^
},
};
これでwebpack.renderer.config.jsの修正は完了です。
webpack.renderer.config.jsのエントリーポイントはrenderer.jsです。webpackはrenderer.jsを起点に、JavaScript内で読み込まれているファイルを追跡してバンドルします。
▼src/renderer.js
import "../src/index.scss";
^^^^^^^^^^^
インポートするファイルをcssからsass/scssに変更します。
electron-forge startコマンドで、修正が反映されていれば組み込み作業は完了です。
以上、ありがとうございました。