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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

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

Q&A

0回答

2092閲覧

Rails 5.0.0.1 : SCSSパーシャルの読み込みの記載方法

innjera

総合スコア132

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

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

0グッド

0クリップ

投稿2016/11/21 23:12

編集2022/01/12 10:55

Rail 5.0.0.1にて開発しています。

色の管理としてSCSSパーシャルを利用して_colors.scssを作成し色を分離。
複数存在する個別のSCSSファイルにて読み込む設定としているのですが、@import 'colors;を、全てのSCSSファイルに記載しないと読み込まないのですが、これはそういうものなのでしょうか?

bootstrapやfont-awesomeを読み込む@import 'bootstrap';@import 'font-awesome';は代表のscssファイルであるapplication.scssに以下記載すれば、その他のSCSSファイルでは記載しなくても読み込む為(全てのscssファイルに記載する必要がない)、質問させていただく次第です。stylesheetsフォルダの構成は以下の通り。
イメージ説明

misakiフォルダ内のscssファイルを読み込むために。misaki.html.erb(デフォルトのapplication.html.erb)ファイルを作成し、以下の通り記載。

ruby

1<%= stylesheet_link_tag 'misaki', media: 'all', 'data-turbolinks-track': 'reload' %>

そして、stylsheetフォルダ直下のmisaki.cssファイルに以下を記載し、misakiフォルダ内のscssファイルを読み込む設定としています。

css

1/* 2*= require_tree ./misaki 3*/

config/initializersディレクトリにassets.rbを作成し、以下記載しています。

ruby

1Rails.application.config.assets.version = '1.0' 2Rails.application.config.assets.precompile += %w( misaki.css )

controllers/application_controller.rbに以下記載し、layoutメソッドでレイアウト決定のメソッドを設定。

ruby

1class ApplicationController < ActionController::Base 2 protect_from_forgery with: :exception 3 4 layout :set_layout 5 6 private 7 def set_layout 8 if params[:controller].match(%r{\A(misaki|admin)/}) 9 Regexp.last_match[1] 10 else 11 'misaki' 12 end 13 end 14end

stylesheets/misaki内の代表ファイルであるapplication.scssファイルに以下を記載

scss

1@import "bootstrap"; 2@import "colors"; 3@import "font-awesome-sprockets"; 4@import "font-awesome"; 5@import '*'

実際にSCSSを記載するファイル(例えばmain.scssには 以下の通り@import "colors";を記載しないと、色を読み込まない)を以下の通り記載。@import "bootstrap";は記載しなくても読み込む為、違和感があり質問させてください。

scss

1@import "colors"; 2 3body { 4 padding-top: 2rem; 5 padding-bottom: 3rem; 6 color: #5a5a5a; 7 text-align: center; 8}

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問