2009-04-30 57 views
47

Tôi làm cách nào để sử dụng CSS với RoR? Khi tôi liên kết bên ngoài, tôi không bao giờ có thể xem các tệp. Tôi cp'd các tập tin .css vào mỗi thư mục tôi có thể nghĩ ... quan điểm, điều khiển, mẫu, và không có gì có vẻ làm việc.Làm cách nào để sử dụng CSS với ứng dụng ruby ​​trên đường ray?

Tôi cần làm gì để bật các tệp CSS bên ngoài bằng ứng dụng đường ray? Tôi mới đến đường ray, vì vậy tha thứ cho tôi nếu điều này là cơ bản.

Trả lời

49

Đặt các file CSS ở nơi công cộng/stylesheets và sau đó sử dụng:

<%= stylesheet_link_tag "filename" %> 

liên kết đến các stylesheet trong bố trí của bạn hoặc các tập tin ERB trong quan điểm của bạn.

Tương tự, bạn đặt hình ảnh trong tệp công khai/hình ảnh và javascript trong các tệp công khai/javascripts.

+0

không có "công cộng/stylesheets", nơi tôi có thể thêm tập tin của tôi? – riship89

+1

Sau đó, bạn có thể tạo ra nó thêm thư mục nào trong cùng thư mục với thư mục ứng dụng của bạn. Sau đó, thêm một thư mục stylesheets trong thư mục công cộng. – PJT

0

Bạn đã thử đặt nó vào thư mục công cộng của mình chưa? Bất cứ khi nào tôi có hình ảnh hoặc những thứ tương tự mà tôi cần tham khảo bên ngoài, tôi đặt tất cả ở đó.

2

Để thêm vào phần trên, nơi rõ ràng nhất để thêm stylesheet_link_tag nằm trong bố cục ứng dụng toàn cục của bạn - application.html.erb.

11

tôi đã làm như sau ...

  1. nơi tập tin css của bạn trong thư mục app/assets/stylesheets.
  2. Thêm liên kết stylesheet <%= stylesheet_link_tag "filename" %> trong file bố trí mặc định của bạn (có khả năng application.html.erb nhất)

tôi khuyên bạn nên sử dụng này trong thư mục công cộng của bạn. Bạn cũng có thể tham khảo biểu định kiểu nội tuyến, chẳng hạn như trong trang chỉ mục của bạn.

+0

này không làm việc cho tôi, cho AssetsFilter lỗi – Volatil3

14

Nếu bạn đang sử dụng đường ray> 3 phiên bản, thì có một khái niệm gọi là asset pipeline. Bạn có thể thêm css của mình vào

app/asset/stylesheets 

khi đó ứng dụng sẽ tự động chọn ứng dụng này. (Điều này rất hữu ích như đường ray sẽ tự động nén các file css)

read more here về đường ống dẫn tài sản

+0

Đó là 'ứng dụng/tài sản/stylesheets' (nên 's' trên 'tài sản') – labyrinth

3

Các bài gốc có thể đã đúng trở lại trong năm 2009, nhưng bây giờ nó thực sự là không chính xác bây giờ, và không có liên kết thậm chí còn cần thiết cho biểu định kiểu như tôi đã đề cập trong một số câu trả lời khác. Rails sẽ làm điều này cho bạn theo mặc định.

  • Nơi bất kỳ tấm .css mới (hoặc khác) trong ứng dụng/tài sản/stylesheets
  • Kiểm tra máy chủ của bạn với đường ray gốc/scripts/ray máy chủ và bạn sẽ thấy các liên kết được thêm vào bởi đường ray riêng của mình.

Bạn có thể kiểm tra điều này với một đường dẫn trong trình duyệt của bạn như testserverpath: 3000/tài sản/filename_to_test.css body = 1

+0

Xin lỗi vì đã necropost, nhưng bạn cũng giống như phạm tội như I. Tuy nhiên, đây không phải là trường hợp ở tất cả. Nếu bạn muốn sử dụng các đường ống dẫn tài sản, và bạn có đúng cách liên kết tập tin CSS của bạn trong application.html.haml của bạn (hoặc .erb) máy chủ của bạn sẽ ném một lỗi, và cho bạn biết để thêm nó vào tiền biên dịch (config/initializers/assets.rb) sorta như vậy 'Rails.application.config.assets.precompile + =% w (custom.css) ' – DotSlashCoding

8

Sử dụng các đường ray kiểu tag tờ để liên kết chính của bạn.css như thế này

<%= stylesheet_link_tag "main" %> 

Tới

config/initializers/assets.rb 

Một khi bên trong assets.rb thêm đoạn mã sau ngay dưới Rails.application.config.assets.version = '1.0'

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

Khởi động lại máy chủ của bạn.

+2

Đây là đúng (cụ thể hơn) câu trả lời cho mỗi tài liệu Rails. Bạn phải thêm nó vào asset.rb để biên dịch trước! – DotSlashCoding

Các vấn đề liên quan