Yêu cầu tuyên bố trong application.css.scss

Question

Tôi muốn sử dụng đá quý lightbox như hộp ưa thích hoặc hộp màu. Cả hai đá quý đều yêu cầu thêm dòng này vào application.css

*= require colorbox-rails 

Đây là vấn đề. Tôi chỉ có tệp application.css.scss. Tất cả các tệp css của tôi là các tệp scss. Tôi có các câu lệnh import trong application.css.scss nhưng không có * = require statements. Thêm kết quả dòng trên trong các lỗi:

CSS hợp lệ sau "*": dự kiến ​​"{", là "= yêu cầu colorb ..."

Đây là application.css.scss hoàn

@import "bootstrap"; 
@import "welcome"; 
@import "sessions"; 
@import "users"; 


*= require colorbox-rails 

Answer 1

application.css.scss hoặc application.css cũng giống nhau. Chỉ cần đổi tên application.css thành application.css.scss.

Để thêm dòng đó, nó sẽ cần phải lên trên cùng, trong một nhận xét. Như thế này:

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require_self 
*= require colorbox-rails 
*/ 

@import "bootstrap"; 
@import "welcome"; 
@import "sessions"; 
@import "users"; 

Answer 2

Rõ ràng, tôi đã có vấn đề này với phông chữ file tuyên bố khác nhau font-khuôn mặt sử dụng một tập tin font.scss duy nhất trong thư mục stylesheets của tôi (Rails ứng dụng sử dụng sass và Haml). Tôi đã theo dõi các vấn đề liên quan (như this article on SO) và đã thử một số giải pháp liên quan như xóa '-' khỏi tên tệp ttf phông chữ, thay đổi khai báo url trong tệp font.scss, v.v.

giải pháp @ joshua.paling đối với tôi ...

1. Thay đổi tên tập tin font.scss để font.css

2. sử dụng các kiểu khai báo như sau trong file application.scss:

   /* ...  
   *= require_self  
   *= require fonts  
   */ 
   # @import other files here excluding the font.css file 
   

Và với cấu hình này tờ khai font-face sau vẫn làm việc

@font-face { 
    font-family: PT Serif; 
    src: url('PT_SerifWebRegular.ttf') format("truetype"); 
}