Rails 5.2.0(Rails 5.1以降)でReactを使う上でwebpackerによるcssの読み込みのメモ
参考の補足程度(config/webpack/environment.jsを触る必要なかった)
- 作成するcssは拡張子.cssでも.scssでもよさそう(.cssでOKだった)
- 作成する場所はapp/javascript/packsでなくてよい(app/javascript/stylesheetsに作成してOKだった)
- 作成するcssのファイル名は.module.cssにする(参考リンク先のようにhello-react.module.sassなどとする)
- 利用したいjsxでimportする(親子jsxどこでも気にせずimportする)
- 呼び出すhaml, erbでstylesheet_pack_tagを記述するが、この時親jsxを指定する(stylesheet_pack_tagを記述しないと読み込まれない)
これで実際に読み込まれたhtmlソースを見るとcss-loaderを使った時のように「class=”unQ5pyAarpPHnB5enco5W“」となっており、スタイルが適用されていることも確認出来る。