本番環境でCSSが崩れてしまいます。
解決したいこと
Ruby on Railsで料理投稿サイトをポートフォリオとして作っています。
開発環境で rails s をするとレイアウトも崩れませんが、
いざ本番環境で試してみると CSS が崩れてしまいます。
このCSS崩れの解決方法を教えてください。
因みに元々本番環境ではレイアウトは崩れておらず、正常に動いていましたが
swiperやランキング機能を追加してCSSが崩れてしまいました。
その辺に原因があると分かっているのですが解決できないでいます。
何卒宜しくお願い致します。
発生している問題・エラー
レイアウトが崩れている一部ですが、開発環境でのデベロッパーツールでCSSを確認すると
上の結果になります。
しかし、本番環境でのデベロッパーツールでCSSを確認すると
上のように全く別のレイアウトになってしまいます。
ヘッダーメニューをハンバーガーメニュー化していたのですがそれが本番環境では機能していないので Bootstrap に問題があると思ったのですが、どこをどう修正すべきなのか分かりません。
また Bootstrap が本当におかしいのか、それとも他が原因でレイアウトが崩れてしまったのか分からないので教えて頂けると凄く助かります。
該当するソースコード (個人的に原因だと思うコード)
(application.js)
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
//レビュー機能の為コメントアウト
//import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"
import '@fortawesome/fontawesome-free/js/all'
//import "cocoon"
//= require jquery
//= require cocoon
//swiper導入
//import Swiper from 'swiper/swiper-bundle.esm.js';
//import 'swiper/swiper-bundle.css';
Rails.start()
//Turbolinks.start()
ActiveStorage.start()
window.$ = window.jQuery = require('jquery');
require('packs/raty')
//swiper導入
//= require swiper/swiper-bundle.min.js
//= require swiper.js
(application.html.erb)
<!DOCTYPE html>
<html>
<head>
<title>アプリケーション名</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
</head>
<body class="color-devise">
<header>
<div class="menu">
<nav class="navbar navbar-expand-lg navbar-dark header">
<div class="container">
<a class="navbar-brand" href="https:XXXXXXXXXX.com">
<span>アプリケーション名</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNavDropdown" style="">
<navbar内コード>
</div>
</div>
</nav>
</div>
</header>
</body>
<%= yield %>
<footer class="bg-warning pt-2 pb-4">
<div class="container mt-5">
<div class="row">
<div class="mx-auto">
<p>Copyright © アプリケーション名 All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
</html>
(application.sccs)
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import 'swiper/swiper-bundle';
(Gemfile)
Vsource 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Active Storage variant
gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 4.1.0'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'devise'
gem 'dotenv-rails'
group :production do
gem 'mysql2'
end
#binding.pry これをコントローラーで使う
gem 'pry-rails'
# 検索機能
gem 'ransack'
# レビュー機能
gem 'bulma-rails'
#レビュー★
#gem 'jquery-rails'
# Cloud Vision API
gem 'dotenv-rails'
自分で試したこと
こちらのページを参考にして、production.rbに config.public_file_server.enabled = true を追加しても上手くいきませんでした。
https://ja.stackoverflow.com/questions/41214/%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E3%81%A7%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%8C%E5%B4%A9%E3%82%8C%E3%82%8B-css%E3%81%8C%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%AA%E3%81%84
他にも確認すべきコードがあればコメントで教えてもらえると幸いです。
何卒宜しくお願い致します。
0
