コントローラー毎にCSSを使い分けたい

Question

Rails 6.0.2.2 を使っています。
assets を使ってコントローラ毎に css を使い分けていて以下のようにうまく機能していました。

app/view/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag params[:controller], media: 'all', 'data-turbolinks-track': 'reload' unless devise_controller? %>

• app/assets/stylesheets/<コントローラ名に対応した名前>.scss が存在する
• application.scss では require_tree . は使っていない

---

これを webpacker 側に寄せたく、以下のように *_pack_tag を使うようにしました。
scss ファイルも app/javascript/stylesheets/ 配下にコピーしました。
application.scss のスタイルは効くようになったのですが、コントローラ毎のスタイルが効いていません。
どうしたらよいでしょうか?

現状では以下のようになっています。

• config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

module.exports = environment

• app/javascript/packs/application.js

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

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

上記の 2行目で scss を読み込んでいると思うのですが、3行目あたりに

import '../stylesheets/コントローラ名1'
import '../stylesheets/コントローラ名2'
.
.

のように列挙しても CSS が混ざってしまいますよね!?

Answer 1

特に設定を変更していなければ、
packs以下に<コントローラ名に対応した名前>.jsを用意して、scssをimportする。
stylesheet_pack_tag <コントローラ名に対応した名前> で読み込みができると思います。

拡張子が必要かもしれませんので、うまくいかなければ適宜つけてください。

users_controllerに適したassetsを読み込む場合。

# packs/users.js
import 'stylesheets/user.scss'

<%= stylesheet_pack_tag <コントローラ名に対応した名前>, オプション %>

Comments

[naserehari]

やってみたのですが、うまく動きませんでした。
どうやら packs/users.js が読み込まれていない...
色々と調べながらいじってみると `stylesheet_pack_tag` ではなく、 `javascript_pack_tag` でうまくいきました。
users.js が JS だからかな...

あと、細かいですが
- 拡張子は無しで行けました
- ご指摘の例では `user.scss` となっていますが、これは `users.scss` の TYPO と解釈しました

[Cojiro]

> - 拡張子は無しで行けました
よかったです。
> ・ご指摘の例では `user.scss` となっていますが、これは `users.scss` の TYPO と解釈しました
失礼しました。

> どうやら packs/users.js が読み込まれていない...
どのように判断されましたか？

[Cojiro]

フォルダ構成を提示していただけますか？

[naserehari]

>> どうやら packs/users.js が読み込まれていない...
>どのように判断されましたか？
packs/users.js に `console.log("hoge")` のデバッグ文を入れました。同時に packs/application.js 内には `console.log("fuga")` を入れたのですが、後者のみ出力されました。

フォルダ構成は以下の通りです(実際のソースです)
```
% tree app/javascript
app/javascript
├── channels
│   ├── consumer.js
│   └── index.js
├── packs
│   ├── application.js
│   └── companies.js
└── stylesheets
　 ├── application.scss
　 ├── companies.scss
　└── welcome.scss

% cat app/javascript/packs/companies.js
import '../stylesheets/companies';
%
```

[Cojiro]

なるほど。その確認方法だと、stylesheets_pack_tagの読み込みだけだとすると、ビルドするときにscssが読み込めていたとしても、hogeは出力できないですね。
ビルドされたcssファイルの中身をブラウザ等から確認して、指定した要素がある確認するのが確実かと思います。

パスの指定の仕方が誤っている可能性があるので、確認したいのですが、
・今回読み込みたいのはcompaniesですか？
・application.scss, companies.scss, welcome.scssはstylesheets/ですか？

[naserehari]

はい。 companies です。
*scss は app/javascript/stylesheets 配下にあります(teratail側が等幅フォントで正しく表示できていないみたいです)

なるほど hoge は出力されないのか。
でも css は反映されていないです(確認済み)

今、疑ってるのは
https://www.rubydoc.info/github/rails/webpacker/Webpacker%2FHelper:stylesheet_pack_tag
によると、 development モードではこのメソッドが機能しない(!?)のでは。って感じです
(英語含めよくわかっていない...)

[naserehari]

> *scss は app/javascript/stylesheets 配下にあります(teratail側が等幅フォントで正しく表示できていないみたいです)
たった今、 tree の出力結果に全角スペースをいれて見た目を調整しました。

[Cojiro]

ありがとうございます。

忘れていましたが、もしかしたら、
webpacker.ymlのextract_cssがfalseになっていませんか？
もしそうだとしたらtrueにして、サーバーを再起動して読み込みをしてみてください。

[naserehari]

> webpacker.ymlのextract_cssがfalseになっていませんか？
false になっていました。 true にすると期待通りになりました!
ありがとうございます。

(少し理解が進んだのですが、全体的にわかっていない部分が多いことに気づけました...もっと勉強します)