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

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

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

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Bootstrap

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

CSSフレームワーク

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

Q&A

0回答

628閲覧

RailsでBootstrapのカスタマイズをしたい

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Bootstrap

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

CSSフレームワーク

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

0グッド

0クリップ

投稿2020/12/24 09:40

前提・実現したいこと

複数人のチームでRails5でアプリケーションを作っています。
フロントエンドについてちゃんとした取り決めをしないままそれぞれ担当の部分を作り進めて
必要に応じてそれぞれがCSSを書いている中で
流石にCSSフレームワークを入れたいということになり、
Bootstrap4を導入することになりました。
そこで、Bootstrapをそのまま使う方法については、
https://github.com/twbs/bootstrap-rubygem
リポジトリの説明通り、gemを入れての手順でうまくいきました。
しかし、全て一括ではなく特定のコンポーネントのみを読み込む方法や、
_variables.scssを編集してSASSの変数を変える方法については
うまくいきません。
他にも色々なページを検索して読んだのですが、gemでbootstrapを入れただけでは
assetsディレクトリの中にbootstrapのコードがないため、下記のような読み込みができないエラーが出ます。

発生している問題・エラーメッセージ

Error: File to import not found or unreadable: foundation/bootstrap_variables. on line 17:2 of app/assets/stylesheets/application.scss

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ruby '2.6.6'
gem 'rails', '> 5.2.4', '>= 5.2.4.3'
gem 'sass-rails', '
> 5.0'
gem 'bootstrap'

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

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

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

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

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

siruku6

2020/12/26 10:20

app/assets/stylesheets/application.scss このファイルの、うまくできた記載方法と、エラーが出た時の記載方法、その他に、Gemfileに記載した記述なども記載した方が回答が付きやすくなると思われます。
退会済みユーザー

退会済みユーザー

2020/12/26 15:15

ありがとうございます。ひとまず、Sassの変数を上書きしてカスタマイズする方法は自己解決しました!変数以外にもなにかカスタマイズする場合はもっと他のやり方をしたほうがよさそうなので引き続き調べてみます。
siruku6

2020/12/26 23:16

解決したようでなによりです! 解決方法を書いてこの質問を自己解決にしてあげると、他の方のためにもなるので、是非ともやってみて下さい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問