日別アーカイブ: 2018年8月13日

Rails 5.2.0 + React + css

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“」となっており、スタイルが適用されていることも確認出来る。