質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

0回答

678閲覧

bootstrapのCSSが適応されない件について

pochi13

総合スコア1

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2021/08/19 05:10

現状のエラーメッセージです

application.scss:4 Uncaught Error: Cannot find module 'top.jpg'
at webpackMissingModule (application.scss:4)
at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss (application.scss:4)
at webpack_require (bootstrap:19)
at Object../app/javascript/stylesheets/application.scss (application.scss?4568:2)
at webpack_require (bootstrap:19)
at Module../app/javascript/packs/application.js (application.js:1)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83

現状のbootstrapのバージョンです。

{
"name": "hikari",
"private": true,
"dependencies": {
"@popperjs/core": "^2.9.3",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "4.3.0",
"bootstrap": "^5.1.0",
"hikari": "^1.1.0",
"jquery": "^3.6.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^4.0.0"
}
}

application.scssの記述です。

@import "~bootstrap/scss/bootstrap";

@import "tweets";

試したこと

bootstrapのバージョンを下げてyarn upgradeを行いましたが挙動は変わりませんでした

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/08/19 05:44

top.jpg ってどこの何者でしょうか 本体ソースコードに存在しないので、Bootstrap関係ないような
pochi13

2021/08/19 06:02

大変失礼いたしました。 app/assets/images/top.jpgにある画像です。 現状CSSが当たっていないためレイアウトもかなり地味になっております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問