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

この記事はQiitaに書いていた自身の記事のコピーです。

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

---

目次

• 前提
  • 1. Webページ制作における通常のParcel
  • 2. ElectronのためにParcelを使う例
• ハマったこと
  • わかったこと
  • 一応解決案
• 以上です

前提

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

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

<script src='./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 ./      : 書き出すフォルダの指定

ハマったこと

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

これを、

parcel build src/app.js -t electron -d ./; electron .

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

わかったこと

どうやら、

import 'reset-css'

は出来ないようです。

import './style.sass'

は大丈夫でした。

一応解決案

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

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

以上です

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

Author

sKawashima sKawashima @_sKawashima es.Kawashima by_sK