Q&A
welcome-indexのhtml記載がありませんが、これは省略されているということでよいですか？
railsのアプリを作っています。
scssが反映されません。お力をお貸しいただきたいです。
<div class="content-wrapper"> <div class="content-block"> </div> <div class="sidebar"> </div> </div>
#welcome-index { background-color: red; .content-wrapper { display: flex; height: 200px; .content-block { background-color: red; width: 80%; height: 200px; } .sidebar { background-color: cadetblue; width: 20%; height: 200px; } } }
検証ツールを見るとuser agent stylesheetというのがあるのですが、何かあらかじめ記述が必要なのでしょうか。
<!DOCTYPE html> <html> <head> <title>App</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body id="<%= controller.controller_name %>-<%= controller.action_name %>"> <%= render 'shared/header' %> <%= yield %> <%= render 'shared/footer' %> </body> </html>
<!DOCTYPE html> <html> <head> <title>App</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="7yJKtgZz751tPzYmHvJoJkPhZJgLQTXNWRMMMevSo4/QPCzTj1Jzf2JwPICIVzpSjYzf4wBJpJU8Luipai+a7g==" /> <link rel="stylesheet" media="all" href="/assets/application.self-b88eec826f4c6c75d86cd7fc27b2d3c28b66f1c791fb8b620e563aaae6b09627.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-66347cf0a4cb1f26f76868b4697a9eee457c8c3a6da80c6fdd76ff77e911715e.js?body=1" data-turbolinks-track="reload"></script> </head> <body id="welcome-index"> <div id="header"> <div class="logo"> <a href="/">ロゴ</a> </div> <div class="link"> <ul id="nav"> <li> <a href="#">メニュー1</a> </li> <li> <a href="#">メニュー2</a> </li> <li> <a href="#">メニュー3</a> </li> </ul> </div> </div> <div class="content-wrapper"> <div class="content-block"> </div> <div class="sidebar"> </div> </div> <h1>がんばれ</h1> <div id="footer"> <p>©️ 2020 Rails Community, All Rights Reserved.</p> </div> </body> </html>
application.html.erbを追加しました。bodyタグのところがwelcome-indexになるようになってます。
不具合の原因らしいものは今の資料では見つけられません。
スクリプトではなく出力結果のhtml記述はできますか？
user agent stylesheetは関係ありません
ありがとうございます！こういうことですか？？？
htmlでscssへのリンク記述が見当たりませんが、、、？
その記述を追加すればいいのでしょうか？
railsに詳しくないのですが、scssファイルがちゃんと読み込めていないことが疑われます。そのあたりを検証いただくことはできますか？
ありがとうございます。
回答1件
0
自己解決
application.cssに
*= require_self
*= require_tree .
のコメントを追加したらSCSSが反映されました。。。
投稿2020/06/30 06:11
総合スコア65
あなたの回答
tips
プレビュー
