webpackerを使用した時にcssをどこに置くのかについて

rails

webpackerを使用していて、cssをどうするか悩みました。

いや、そもそも何に悩んでいるの？という話だと思います。

jsファイルは原則javascript/packsに存在する→jsから読み込むcssファイルはどこに置く？→javascript/stylesを作成して、そこから使用するようにする→全部そこに置いたほうがよくない？

一番最後の全部javascript/stylesに置くというのは、webpackに全てを預けるということになります。

mastodonは全てをjavascriptに含んでいます。

https://github.com/tootsuite/mastodon/tree/master/app/javascript

メリット

  • ファイルの置く場所が固定できる→書くときに迷わない
  • 完全にsprocketsの呪縛を解くことができる(cssも)
  • ビルドを完全に一元化できる(webpackのみ)

デメリット

  • webpackが廃れた時の移行コストが高い。
  • imagesも置かないと、中途半端になる。

解決策

  • webpackとともにする
  • css/imagesはsprocketsを利用する

ここで後者を選びました。

理由

  • railsの資産が残る
    • image_tag asset_pack_path('logo_full.svg')と書かなくて良い(imageがpackってのはちょっと変な気がする)
  • 将来的な移行コスト(webpackはおそらく廃れるはず)

ただし、jsしか使用しない、cssはjavascript/stylesを作成して、そこから使用するようにします。

こうすると、jsしかクラスはjs-xxxとして利用すれば、ネームスペースでぶつかることはなくなると思います。

想定されること

Q node_modules配下のcssはどうする？

A sprocketsに任せます

@import 'swiper/dist/css/swiper'

これはswiperというnpmのcssですが、sprocketsから読み込みをしています。

asstesのpathを確認します。

Rails.application.assets.paths
=> "/Users/xxx/rails/xxx/node_modules"

これで入っていないようでしたら、追加しましょう。

# config/application.rb
config.assets.paths << config.root.join("node_modules")

Q sprocketsのsassの変数共有したい

A webpackerの設定でなんとかできるはず（これは調べる）

結論

ルールを決めることが大事ですね。