stylesheet_pack_tag と Webpackerの設定 extract_css

環境: Rails 6.0、Webpacker 4.2

Rails 6にjQueryとBootstrapを入れる で紹介したように、BootstrapのCSSをWebpackerで入れるとします。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

app/javascript/packs/application.js

import 'bootstrap';
import '../stylesheets/application';

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

こうしたあとで、別のレイアウトテンプレートを作り、packs/application.js のJavaScriptは要らないけど、CSSは使いたい、と考えて次のように書きました。すると、CSSが効かなくなります。

app/views/layouts/foo.html.erb

<%= javascript_pack_tag 'foo', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

ブラウザでソースコードを見ると、javascript_pack_tag は効いているけど stylesheet_pack_tag が消えているように見えます。なお、production環境ではCSSを指定するlinkタグが現れます。

 <script src="/packs/js/foo-fdb6162f96917ff2da38.js" data-turbolinks-track="reload"></script>

javascript_pack_tag と stylesheet_pack_tag の仕様はこうなってます：development環境では、JavaScriptを使って動的にCSSを埋め込む。CSSファイルを生成してlinkタグに指定することはしない。

development環境でもlinkタグを出すには、config/webpacker.yml で extract_css の値をtrueに変えます。public/packsを削除してrailsを再起動してください。

  # Extract and emit a css file
  extract_css: true

するとlinkタグが現れます。

<script src="/packs/js/foo-fdb6162f96917ff2da38.js" data-turbolinks-track="reload"></script>
<link rel="stylesheet" media="screen" href="/packs/css/application-95ef19c6.css" data-turbolinks-track="reload" />