##概要
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の設定を行います。
# 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を記述する。
<%= 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 %>を追加します。
<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の一番上に以下を記述します。
<% content_for :css do %>
<%= stylesheet_link_tag 'posts/index' %>
<% end %>
以上で、viewごとにcssを読み込ませることができます。