Rails專案載入前端頁面後,CSS跑版&JS功能不正常


#1

嗨,在最近的專案上我遇到了一個問題。先前的工作都是處理後端的issue,所以不會碰到需要匯入(require?)前端html/css/javascript到rails專案的問題。所以問題可能會有點蠢,但我卡了很久…

情況描述:

前端設計完之後,頁面上內容跟js操作起來都沒有問題,但是當我在application.js & application.scss require 檔案後,格式就變得很怪,像是css跑版的情況。

前端給我的檔案

css
29

javascript
44

前端頁面檔案載入順序

27

拿到檔案後我就直接把檔案放到app/assets下的javascript & stylesheets資料夾內

09

在rails專案中require檔案

# index.html.erb
<%= stylesheet_link_tag 'index.css' %>
<%= stylesheet_link_tag 'font-awesome.min.css', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'perfect-scrollbar.css', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag "bootstrap.min.css" %>
<%= stylesheet_link_tag "bootstrap-grid.min.css" %>

 # application.scss
@import "bootstrap-sprockets";
@import "bootstrap";

# application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks

rails專案中頁面檔案載入順序

16

Gemfile

gem 'rails', '~> 5.1.4'
gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'client_side_validations'
gem 'pg', '0.20.0'
gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'

嘗試過程

本來想說會不會是因為檔案中載入順序造成格式跑掉,但是當我試圖把css放在application.scss情況還是一樣,所以似乎問題不是出在載入順序上。一來是因為不太熟悉載入css/js檔案的情況,所以我就卡住了,也有點不知道到該如何繼續解。

本來還有想說是不是因為bootstrap沒有安裝成功的原因,但是有重新安裝bootstrap並試過css功能,看起來沒有問題。

後來有把特定的css檔案拿掉(內包含頁面主要效果&背景圖片),發現確實是有載入該css檔的情形,但是似乎就是格式跑掉了。

有在想會不會是需要whitespace-reset的css檔,但看起來似乎不像。所以…

救命QQ


#2

首先 … 你載了兩套 bootstrap …

@import "bootstrap";
全等於
<%= stylesheet_link_tag "bootstrap.min.css" %>

且 bootstrap 應該都在最上面,css / js 有非常嚴重載入順序要求,看起來你完全顛倒了|||,對我而言的順序應該會類似

<%= stylesheet_link_tag "bootstrap.min.css" %>
<%= stylesheet_link_tag "bootstrap-grid.min.css" %>
<%= stylesheet_link_tag 'font-awesome.min.css', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'perfect-scrollbar.css', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'index.css' %>

否則你有用覆寫會整票亂糟糟唄, & 學會用 content_for :name & yield :name 的方式唄,你不應該把 css 引入在 body 之內的,否則 css 有對 body 之類的覆寫會無效的,你可以把你的 layout 多做些擴充,我們 youtube 教學影片中有提及這段就是了

手工 layout 段(下面回文有時間軸)

再來就是前端的 bootstrap 和你後端的 bootstrap 不同版本,版本差異也很重要,所以你可以單純的使用 bootstrap.min.css 並移除 @import "bootstrap"; 就是


#3

謝謝JC大的回覆!

後來有解決掉這個問題了。
基本上就跟JC大說得一樣,是載入順序以及rails&前端的bootstrap版本不同所引起的。

不過我有發現一個現象是,似乎壓縮過的js檔會影響js的效果。
因為後來另外把載入順序&bootstrap版本不同的問題解決後,發現jquery無法正常運作。

但是後來拿到了重新撰寫過的js檔(未壓縮),似乎就沒有這麼問題了。
想請問實務上會有這樣的問題嗎?

感謝


#4

一樣大概都只有載入順序和寫錯 code 的問題而已,所謂的 js 壓縮 (minify) 也只是個別壓縮,然後照順序貼成同一檔案而已,沒別的 magic 的東西,所以基本上不會動到流程或 code 的內容,除非是你在 minify 的階段就噴錯了,類似 css / sass / js 用了特殊語法(完全不支援針對舊版 IE 的 evil 寫法,還有一票 ES6 縮寫的特色),你可以下類似 rails assets:precompile RAILS_ENV=production, log 內噴錯應該會有提示才是,不過那邊不好 debug,建議刪除部分檔案或語法重跑,看是否能無 error 的通過,則錯誤部分就在刪除部分就是,慢慢收斂就可以找到 bug 發生之處

再來 jquery_rails 記得要載入 … 大概就這些而已唄