Tengo un archivo style.scss donde he importado un montón de otros archivos como

@import url(asset-path('bootstrap/css/bootstrap.min.scss'));
@import url(asset-path('ionicons/css/ionicons.min.scss'));
@import url(asset-path('slick-carousel/slick/slick.scss'));
@import url(asset-path('slick-carousel/slick/slick-theme.scss'));
@import url(asset-path('owl-carousel/assets/owl.carousel.min.scss'));
@import url(asset-path('owl-carousel/assets/owl.theme.default.scss'));
@import url(asset-path('owl-carousel/assets/carousel.min.scss'));
@import url(asset-path('bxslider/jquery.bxslider.min.scss'));
@import url(asset-path('magicsuggest/magicsuggest-min.scss'));

Estos archivos se encuentran en el directorio vendor /.

Mirando la pestaña de red en el modo de producción, el servidor realiza una solicitud a cada uno de los archivos importados de los archivos scss en lugar de compilarlos en un archivo.

También estoy usando sass rails gem. ¿Hay algo que no esté entendiendo sobre la cartera de activos de rieles?

1
Raaz 16 oct. 2018 a las 07:18

2 respuestas

La mejor respuesta

La confusión proviene del hecho de que SASS anula la directiva @import de alguna manera.

En su caso, la CSS '@import directive pura es utilizado ya que está pasando url(.., que como notó hace una solicitud HTTP para cada archivo.

Para usar la versión de SASS de @import (que importará y combinará el contenido), debe pasar los archivos entre comillas:

...  
@import 'slick-carousel/slick/slick.scss';
...

Aquí hay una explicación detallada sobre SASS '@import

1
Viktor Nonov 16 oct. 2018 a las 05:28

Su archivo css maestro se realiza a través del archivo app/assets/stylesheets/application.css.

Por ejemplo:

*= require navbars.css.scss
*= require footer.css.scss
*= require cookiewarning.css.scss
*= require_self

El código anterior incluirá en el archivo maestro application.css todos los archivos css mencionados, ya sea que estén ubicados en app/assets app/lib o app\vendor.

Su archivo maestro se llama en views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all' %>  
<%= yield(:headcss) %>
<%= stylesheet_link_tag params[:controller], media: 'all' %> 

Como puede ver, tengo un archivo separado para el controlador actual. Y también una etiqueta yield para CSS adicional que me gustaría agregar cuando sea necesario.

También una nota sobre sus archivos: SASS es un preprocesador de CSS. Es mejor nombrar sus archivos whatever.css.scss que whatever.scss. Tuve algunos problemas para que los ayudantes SASS funcionen correctamente debido a esto: Sass rails parece generar una ruta lógica diferente a la del manifiesto

0
Maxence 16 oct. 2018 a las 07:47