6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-07-14

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

前提

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'

以上です

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

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?