Parcel+ElectronではJSからCSSモジュールをimport/require出来ない

3996 ワード
Electron reset.css JavaScript parcel JavaScript テキストリンク

　ハマりレポです。半日吹き飛びました。

前提

1. Webページ制作における通常のParcel

通常のParcelでは、JS経由でCSSをimport/requireできる

index.html
<script src='./app.js'>
app.js
import 'reset-css'
// npmモジュールの「reset-css」をimport
import './style.sass'
// 自分で書いた「style.sass」をimport
出力実行コマンド
parcel index.html

2. ElectronのためにParcelを使う例

ParcelにはElectron用のモード-t electronがあるので、それを使います。これを忘れるとエラーがでます。

ファイル構成例
./package.jsonなどは略
./src/app.js
実行コマンド例
parcel build src/app.js -t electron -d ./; electron .
# -t electron: electron mode
# -d ./      : 書き出すフォルダの指定

ハマったこと

1でやってた

app.js
import 'reset-css'
import './style.sass'

を2のような

実行コマンド例
parcel build src/app.js -t electron -d ./; electron .

で呼び出して使おうとするとエラーが出ました。

わかったこと

どうやら、

app.js
import 'reset-css'

は出来ないようです。

app.js
import './style.sass'

は大丈夫でした。

一応解決案

Sassファイルからimportしました。

style.sass
@import 'node_modules/reset-css/sass/reset'

以上です

これを読んだあなた。どうか真相を暴いてください
もっとスマートな解決策があったら教えてください。よろしくおねがいします。

Python 3.8がもたらす主な新しい特性を体験してみましょう