Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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" />
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?