RailsのwebpackerにおけるCSSインポート時のrequire, importによる違い

環境

• Rails 5.2.2
• Ruby 2.5.3
• webpacker 3.5.5

概要

webpackerを使ってCSSを利用するため、jsファイルにCSSをインポートする必要があり、以下の２つの書き方がある

// application.js
require('../stylesheets/application.scss')

// application.js
import('../stylesheets/application.scss')

どちらを使うかによってviewで使用するヘルパーが変わる

viewでの読み込み方法

requireの方は

= javascript_pack_tag 'application'
= stylesheet_pack_tag 'application'

importの方は

= javascript_pack_tag 'application'

のみでCSSも読み込まれる。

理由

不明。詳しい方コメントで教えていただけると助かります。

追記: 2019/01/27

解決したかも。記事にしました。

kongaribug.hatenablog.com