【React】Onsen UI導入時にCSSが反映されない時の対処法

村上 著者:村上

【React】Onsen UI導入時にCSSが反映されない時の対処法

先日から、Cordova のアプリに Onsen UI を導入しているのですが、その際に CSS が反映されなかったのでその対処法について。
参考にしたサンプルコードには、CSS ファイルに関することって載っていなかったんですよね。

 

が、公式サイトをよく確認したら載っていました。
そのページはこちらから。

React – Onsen UI
https://onsen.io/v2/guide/react/

上記ページによると、import で下記の2ファイルを読み込めばOKです。

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

…が、上記を追加してビルドをしたところ、エラーが発生しました。
エラー文は下記のとおりです。

./node_modules/onsenui/css/onsenui.css
Error: Cannot find module ‘@csstools/normalize.css’

モジュールが見つかりませんとのことでしたが…この辺は特にいじっていないはずなのですが…。
で、実際にエラー文で書かれていたディレクトリを確認したところ、normalize.css というディレクトリはありましたが、同名の CSS ファイルはありませんでした。
まさかこれか…?と思い、normalize.css ディレクトリ内にある同名の CSS ファイルを @csstools ディレクトリ直下に移動させました。
念のためスクリーンショットを乗せると下のとおりです。

なお、normalize.css ディレクトリは名前を変更する必要があります。

上記作業後、再度ビルドを実行したところ、今度は問題なくビルドに成功しました。
その後、アプリを実行してみたところ、無事に CSS が反映されていました!

 

以上、Onsen UI で CSS が反映されない時の対処法でした。
正しいのかは分かりませんが…とりあえず、動作はしたのでいいということにします。
ご参考になれば幸いです。

  • この記事いいね! (0)

著者について

村上

村上 administrator