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

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

ただいまの
回答率

87.90%

stylesheet_link_tag でエラー

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,752
退会済みユーザー

退会済みユーザー

Rails 上で SCSS に bootstrap のクラスを使いたいです

最終的にやりたいことは 「Rails でかかれたデータ分析画面にきれいなデザインをあてる」
→ そのために bootstrap ベースのダッシュボードテンプレートをあてたい
→ view を bootstrap4 に書き直したい
→ bootstrap を使うと HTML が重複したクラスだらけになる
→ https://teratail.com/questions/52379 これと同じく bootstrap3 のクラス名や共通部品へのクラス指定はCSS側に側にまとめてHTML側のクラスを最小限にしたい

という感じです

試しに @extend で bootstrap クラスを呼び出そうとしても存在しないといわれます
どうすれば SCSS 内で bootstrap 内のクラスをよびだせるんでしょうか

Rails もさわりはじめて数週間で bootstrap SCSS ははじめてなのですが
何から手を付けていいかわからず困っています

よろしくおねがいします

追記:

https://qiita.com/shizuma/items/83cdadbe0a629f1f74d1

この手順どおり Gemfile に
gem 'bootstrap-sass' を追加し
(gem 'sass-rails' はすでにかかれていました)
bundle install で

Fetching bootstrap-sass 3.3.7
Installing bootstrap-sass 3.3.7


インストールを確認し、
rails を起動しなおしたのですが

application.scss に
@import “bootstrap-sprockets”;
@import "bootstrap";
とかいても

Invalid CSS after "@import ": expected file to import (string or url()), was "“bootstrap-spro..."


というエラーになります

追記:

GEM や require をいろいろさわってたら
@import 'bootstrap' でエラーはでなくなりました

ただ

@import "bootstrap";

.navbar {
  @extend .px-1;
}

とかいても .px-1 が syntax error になります
HTML に class="navbar" とかくだけで細かいデザインはCSS側にかきたいのですが
こういう書き方では class="navbar px-1" とかくのと同じにはならないのでしょうか…

追記:

https://github.com/rails/jquery-rails

bootstrap4 を使うには bootstrap-sass ではなく bootstrap をいれなければいけなかったようです

gem 'bootstrap'


をかいて

bundle install をしただけなのですが

uninitialized constant ExecJS::Runtimes::RubyRacerRuntime
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

というエラーになります

他の変更をすべて戻して動いてる状態から
gem 'bootstrap' の追加と bundle install のみで rails s をするとこうなります

bundle install で変更された Gem は以下

Fetching autoprefixer-rails 9.1.3
Installing autoprefixer-rails 9.1.3
Fetching popper_js 1.14.3
Installing popper_js 1.14.3
Fetching bootstrap 4.1.3
Installing bootstrap 4.1.3


エラーメッセージで検索するといくつかヒットして

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>


の application を default にすると動く
というものでしたがこれは assets に存在しないファイルをよみこんで404のままスルーしてるだけで
application 以外の存在する css, scss を読み込もうとしても同じエラーがでます

FullTrace をみると最後のほうが

lib/autoprefixer-rails/processor.rb:149:in `runtime'
autoprefixer-rails (9.1.3) lib/autoprefixer-rails/processor.rb:37:in `process'
autoprefixer-rails (9.1.3) lib/autoprefixer-rails/sprockets.rb:20:in `run'
autoprefixer-rails (9.1.3) lib/autoprefixer-rails/sprockets.rb:14:in `call'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:75:in `call_processor'


ってなってるので autoprefixer のバージョンがあがったのが悪いのかな…
とはいえ解決方法がまったくわからないのでどなたか助けていただけるとうれしいです

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

やっぱり autoprefixer を更新したのがだめだったっぽい

gem 'autoprefixer-rails', '~> 9.0.0'


ではだめで

gem 'autoprefixer-rails', '~> 8.0'


にしたらなおった

https://github.com/postcss/autoprefixer/commit/b41f52a939144f0f2e230801986bc7142f163e03#diff-354f30a63fb0907d4ad57269548329e3

install:
  - YARN_IGNORE_ENGINES=true yarn


を加えたら 9.1.3 でも動いたので何してるかは不明だけどこのコミットのせいみたいです

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る