Richiedi istruzione in application.css.scss

Question

Desidero utilizzare una gemma lightbox come fancybox o color box. Entrambe le gemme chiedono di aggiungere questa linea nell'applicazione.

*= require colorbox-rails 

Ecco il problema. Ho solo i file application.css.scss. Tutti i miei file CSS sono file scss. Ho istruzioni import nel file application.css.scss ma non * = richiedono istruzioni. Aggiungendo i risultati di linea di cui sopra in errore:

valido CSS dopo "*": previsto "{", è stato "= richiedono colorB ..."

Ecco l'application.css.scss completa

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


*= require colorbox-rails 

Answer 1

application.css.scss o application.css sono un po 'gli stessi. Basta rinominare il tuo application.css a application.css.scss.

Per quanto riguarda l'aggiunta di quella linea, sarà necessario essere in cima, in un commento. Come questo:

/* 
* 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

Esplicitamente, ho avuto questo problema con i file font dichiarano diversi di font-facce utilizzando un unico file font.scss nel mio indice fogli di stile (applicazione Rails utilizzando sass e Haml). Avevo seguito problemi correlati (come this article on SO) e avevo provato un numero di soluzioni correlate come rimuovere '-' dal nomefile del font ttf, cambiando le dichiarazioni dell'URL nel file font.scss, ecc.

@ la soluzione di joshua.paling funzionava per me ...

1. Modificare il nome del file per font.scss font.css

2. utilizzare la seguente dichiarazione di stile nel file application.scss:

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

E con questa configurazione le seguenti dichiarazioni font-face ancora lavorato

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