teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問stylesheet_link_tag でエラー

編集履歴

質問編集履歴

7

質問内容の変更

2018/08/23 03:33

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Rails 上で SCSS で bootstrap のクラスを呼び出したい
1
+ stylesheet_link_tag でエラー
test CHANGED
@@ -1,4 +1,4 @@
1
- bootstrap を使うと HTML がクラスだらけになってしまうのですがそういうものなのでしょうか
1
+ Rails 上で SCSS に bootstrap のクラスを使いたいです
2
2
 
3
3
 
4
4
 
@@ -8,6 +8,8 @@
8
8
 
9
9
  →　view を bootstrap4 に書き直したい
10
10
 
11
+ →　bootstrap を使うと HTML が重複したクラスだらけになる
12
+
11
13
  →　https://teratail.com/questions/52379　これと同じく bootstrap3 のクラス名や共通部品へのクラス指定はCSS側に側にまとめてHTML側のクラスを最小限にしたい
12
14
 
13
15
 

6

追記

2018/08/23 03:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,20 +8,14 @@
8
8
 
9
9
  →　view を bootstrap4 に書き直したい
10
10
 
11
+ →　https://teratail.com/questions/52379　これと同じく bootstrap3 のクラス名や共通部品へのクラス指定はCSS側に側にまとめてHTML側のクラスを最小限にしたい
12
+
11
13
 
12
14
 
13
15
  という感じです
14
16
 
15
17
 
16
18
 
17
- bootstrap4 からは SCSS がサポートされているみたいで
18
-
19
- @extend をつかってスタイルシートでデザインをあてていけば
20
-
21
- HTML を汚さずに bootstrap が適用できるのかなと思ったのですが
22
-
23
-
24
-
25
19
  試しに @extend で bootstrap クラスを呼び出そうとしても存在しないといわれます
26
20
 
27
21
  どうすれば SCSS 内で bootstrap 内のクラスをよびだせるんでしょうか

5

書式の改善

2018/08/23 02:50

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -138,11 +138,11 @@
138
138
 
139
139
  bootstrap4 を使うには bootstrap-sass ではなく bootstrap をいれなければいけなかったようです
140
140
 
141
-
141
+ ```
142
142
 
143
143
  gem 'bootstrap'
144
144
 
145
-
145
+ ```
146
146
 
147
147
  をかいて
148
148
 
@@ -150,12 +150,14 @@
150
150
 
151
151
  bundle install をしただけなのですが
152
152
 
153
-
153
+ ```
154
154
 
155
155
  uninitialized constant ExecJS::Runtimes::RubyRacerRuntime
156
156
 
157
157
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
158
158
 
159
+ ```
160
+
159
161
 
160
162
 
161
163
  というエラーになります
@@ -170,6 +172,8 @@
170
172
 
171
173
  bundle install で変更された Gem は以下
172
174
 
175
+ ```
176
+
173
177
  Fetching autoprefixer-rails 9.1.3
174
178
 
175
179
  Installing autoprefixer-rails 9.1.3
@@ -182,12 +186,16 @@
182
186
 
183
187
  Installing bootstrap 4.1.3
184
188
 
185
-
189
+ ```
186
190
 
187
191
  エラーメッセージで検索するといくつかヒットして
188
192
 
193
+ ```
194
+
189
195
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
190
196
 
197
+ ```
198
+
191
199
  の application を default にすると動く
192
200
 
193
201
  というものでしたがこれは assets に存在しないファイルをよみこんで404のままスルーしてるだけで
@@ -198,6 +206,8 @@
198
206
 
199
207
  FullTrace をみると最後のほうが
200
208
 
209
+ ```
210
+
201
211
  lib/autoprefixer-rails/processor.rb:149:in `runtime'
202
212
 
203
213
  autoprefixer-rails (9.1.3) lib/autoprefixer-rails/processor.rb:37:in `process'
@@ -208,6 +218,8 @@
208
218
 
209
219
  sprockets (3.4.0) lib/sprockets/processor_utils.rb:75:in `call_processor'
210
220
 
221
+ ```
222
+
211
223
  ってなってるので autoprefixer のバージョンがあがったのが悪いのかな…
212
224
 
213
225
  とはいえ解決方法がまったくわからないのでどなたか助けていただけるとうれしいです

4

追記

2018/08/23 02:41

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -123,3 +123,91 @@
123
123
  HTML に class="navbar" とかくだけで細かいデザインはCSS側にかきたいのですが
124
124
 
125
125
  こういう書き方では class="navbar px-1" とかくのと同じにはならないのでしょうか…
126
+
127
+
128
+
129
+
130
+
131
+ 追記：
132
+
133
+
134
+
135
+ https://github.com/rails/jquery-rails
136
+
137
+
138
+
139
+ bootstrap4 を使うには bootstrap-sass ではなく bootstrap をいれなければいけなかったようです
140
+
141
+
142
+
143
+ gem 'bootstrap'
144
+
145
+
146
+
147
+ をかいて
148
+
149
+
150
+
151
+ bundle install をしただけなのですが
152
+
153
+
154
+
155
+ uninitialized constant ExecJS::Runtimes::RubyRacerRuntime
156
+
157
+ <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
158
+
159
+
160
+
161
+ というエラーになります
162
+
163
+
164
+
165
+ 他の変更をすべて戻して動いてる状態から
166
+
167
+ gem 'bootstrap' の追加と bundle install のみで rails s をするとこうなります
168
+
169
+
170
+
171
+ bundle install で変更された Gem は以下
172
+
173
+ Fetching autoprefixer-rails 9.1.3
174
+
175
+ Installing autoprefixer-rails 9.1.3
176
+
177
+ Fetching popper_js 1.14.3
178
+
179
+ Installing popper_js 1.14.3
180
+
181
+ Fetching bootstrap 4.1.3
182
+
183
+ Installing bootstrap 4.1.3
184
+
185
+
186
+
187
+ エラーメッセージで検索するといくつかヒットして
188
+
189
+ <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
190
+
191
+ の application を default にすると動く
192
+
193
+ というものでしたがこれは assets に存在しないファイルをよみこんで404のままスルーしてるだけで
194
+
195
+ application 以外の存在する css, scss を読み込もうとしても同じエラーがでます
196
+
197
+
198
+
199
+ FullTrace をみると最後のほうが
200
+
201
+ lib/autoprefixer-rails/processor.rb:149:in `runtime'
202
+
203
+ autoprefixer-rails (9.1.3) lib/autoprefixer-rails/processor.rb:37:in `process'
204
+
205
+ autoprefixer-rails (9.1.3) lib/autoprefixer-rails/sprockets.rb:20:in `run'
206
+
207
+ autoprefixer-rails (9.1.3) lib/autoprefixer-rails/sprockets.rb:14:in `call'
208
+
209
+ sprockets (3.4.0) lib/sprockets/processor_utils.rb:75:in `call_processor'
210
+
211
+ ってなってるので autoprefixer のバージョンがあがったのが悪いのかな…
212
+
213
+ とはいえ解決方法がまったくわからないのでどなたか助けていただけるとうれしいです

3

書式修正

2018/08/23 02:40

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -120,6 +120,6 @@
120
120
 
121
121
  とかいても .px-1 が syntax error になります
122
122
 
123
- HTML に class="navbar" とかくだけで細かいデザインはCSS側にかきたいのですがこういう書き方では
123
+ HTML に class="navbar" とかくだけで細かいデザインはCSS側にかきたいのですが
124
124
 
125
- class="navbar px-1" とかくのと同じにはならないのでしょうか…
125
+ こういう書き方では class="navbar px-1" とかくのと同じにはならないのでしょうか…

2

追記

2018/08/22 07:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -83,3 +83,43 @@
83
83
  ```
84
84
 
85
85
  というエラーになります
86
+
87
+
88
+
89
+
90
+
91
+ 追記：
92
+
93
+
94
+
95
+ GEM や require をいろいろさわってたら
96
+
97
+ @import 'bootstrap' でエラーはでなくなりました
98
+
99
+
100
+
101
+ ただ
102
+
103
+
104
+
105
+ ```
106
+
107
+ @import "bootstrap";
108
+
109
+
110
+
111
+ .navbar {
112
+
113
+ @extend .px-1;
114
+
115
+ }
116
+
117
+ ```
118
+
119
+
120
+
121
+ とかいても .px-1 が syntax error になります
122
+
123
+ HTML に class="navbar" とかくだけで細かいデザインはCSS側にかきたいのですがこういう書き方では
124
+
125
+ class="navbar px-1" とかくのと同じにはならないのでしょうか…

1

追記

2018/08/22 07:23

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- bootstrap のクラスを SCSS の @extend で呼び出したい
1
+ Rails 上で SCSS で bootstrap のクラスを呼び出したい
test CHANGED
@@ -35,3 +35,51 @@
35
35
 
36
36
 
37
37
  よろしくおねがいします
38
+
39
+
40
+
41
+ 追記：
42
+
43
+
44
+
45
+ https://qiita.com/shizuma/items/83cdadbe0a629f1f74d1
46
+
47
+
48
+
49
+ この手順どおり Gemfile に
50
+
51
+ gem 'bootstrap-sass' を追加し
52
+
53
+ （gem 'sass-rails'　はすでにかかれていました）
54
+
55
+ bundle install で
56
+
57
+ ```
58
+
59
+ Fetching bootstrap-sass 3.3.7
60
+
61
+ Installing bootstrap-sass 3.3.7
62
+
63
+ ```
64
+
65
+ インストールを確認し、
66
+
67
+ rails を起動しなおしたのですが
68
+
69
+
70
+
71
+ application.scss に
72
+
73
+ @import “bootstrap-sprockets”;
74
+
75
+ @import "bootstrap";
76
+
77
+ とかいても
78
+
79
+ ```
80
+
81
+ Invalid CSS after "@import ": expected file to import (string or url()), was "“bootstrap-spro..."
82
+
83
+ ```
84
+
85
+ というエラーになります