1. kazutosato

    Posted

    kazutosato
Changes in title
+stylesheet_pack_tag と Webpackerの設定 extract_css
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,48 @@
+環境: Rails 6.0、Webpacker 4.2
+
+[Rails 6にjQueryとBootstrapを入れる](https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a) で紹介したように、BootstrapのCSSをWebpackerで入れるとします。
+
+
+```css:app/javascript/stylesheets/application.scss
+@import '~bootstrap/scss/bootstrap';
+```
+
+```javascript:app/javascript/packs/application.js
+import 'bootstrap';
+import '../stylesheets/application';
+```
+
+```erb: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が効かなくなります。
+
+
+```erb: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タグが現れます。
+
+```html
+ <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/packを削除してrailsを再起動してください。
+
+```yaml
+ # Extract and emit a css file
+ extract_css: false
+```
+
+するとlinkタグが現れます。
+
+```html
+<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" />
+```