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

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

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

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

Ruby

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

Sass

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

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

461閲覧

EC2上のRails5でSassの@importがうまくいかない件

capybara1229

総合スコア8

Ruby on Rails 5

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

Ruby

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

Sass

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

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2018/08/17 01:50

編集2018/08/17 03:22

Railsアプリのstylesheetsのコンパイルについて、@importがうまく機能せず困っています。

詳細

npmで管理しているライブラリのCSSを、node_modulesから下記のかたちで読み込んでいます。

・config/application.rb

lang

1module Hoge 2 class Application < Rails::Application 3 config.assets.paths << config.root.join('node_modules') 4 end 5end

・app/assets/stylesheets/custom.css.scss

lang

1// node_modules内のpath 2@import 'admin-lte/dist/css/AdminLTE.min.css'; 3@import 'font-awesome/css/font-awesome.min.css';

この方法で、ローカル(AWS Cloud9)では指定のスタイルが適用されますが、EC2にデプロイするとうまくいきません。

確認していること

ローカルにて、@importの挙動について下記のことを確認しました。

  • 対象ファイルがstylesheets内の場合: 間違えるとエラーが発生
  • 対象ファイルがstylesheets外の場合: エラーが発生しない(アプリ、ブラウザ共に)

さいごに

RailsもEC2も知識が浅くなかなか解決できないので、ご教示いただけますと幸いです。
どうかよろしくお願いいたいます。

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

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

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

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

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

guest

回答1

0

自己解決

①@importの中身は拡張子を消す
https://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file

②font-awesomeは更にnginxの設定ファイルに追記する必要がありました。
https://www.bunkei-programmer.net/entry/2013/10/14/140635

投稿2018/08/18 08:22

capybara1229

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問