概要
Railsでwebアプリケーション作成時にフロント部分で
「Viewごとに読み込ませるScssを分けたら開発しやすくなるのにな」と思い、
いろいろ調べてうまくいったのでメモ程度ですが残します。
1.app/assets/stylesheets/application.cssを修正します。
Railsアプリでは、デフォルトでアセットに含まれているＣＳＳとJavaScriptは全て読み込むようになっています。
今回はViewごとに読み込ませるcssを分けたいので、CSSを全て読み込ませる設定を無効にします。
「*= require_tree .」を削除
app/assets/stylesheets/application.css
修正前
*= require_tree . #ここの'='を削除します
*= require_self
*/
修正後
* require_tree .
*= require_self
*/
2.config/initializers/assets.rbに読み込むcssを設定します。
次に読み込むcssの設定を行います。
config/initializers/assets.rb
# scss個別読み込み設定
Rails.application.config.assets.precompile += %w(
style.css
common/*
partial/*
posts/index.css
posts/new.css
)
Dockerを使って開発しているので
設定を行ったあとはコンテナを再起動します。
ターミナル
$docker-compose down
$docker-compose up -d
3.html.erbに読み込むcssを記述する。
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'common/navbar', :media => "all" %>
これでapp/assets/stylesheets/common/navbar.scssを読み込むようになりました。
おまけ ~viewごとにスタイルを変えたい時~
viewごとに適用するcssを分けて記述したい時ってどうすればいいのか？
view(index.html.erb)に
先ほどの<%= stylesheet_link_tag 'common/navbar', :media => "all" %>ようにすると
bodyタグ内でcssの読み込みを行うことになるので、出来ないのではないか？
と思ったので調べてみました。
どうやら「content_for」を使うと良いみたいです。
1.application.html.erbに<%= yield :css %>を追加します。
application.html.erbのheadタグ内に<%= yield :css %>を追加します。
application.html.erb
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>Favrip</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://kit.fontawesome.com/ad0b153fee.js" crossorigin="anonymous"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%# ここを追記します。 %>
<%= yield :css %>
</head>
2.読み込ませたいビューにcontent_forを使ってcssを指定します。
html.erbの一番上に以下を記述します。
index.html.erb
<% content_for :css do %>
<%= stylesheet_link_tag 'posts/index' %>
<% end %>
以上で、viewごとにcssを読み込ませることができます。