CODEWITHSUNDEEP
ruby-on-railsasset-pipeline
Raaz
Raaz

Reputation: 1771

imported css files are not compiled into application.css file

I have a style.scss file where i have imported bunch of other files like

@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'));

these files are located under vendor/ directory.

Looking at the network tab in production mode, the server makes request to each an every of those imported files from the scss files instead of compiling them under on file.

I am also using sass rails gem. Is there anything I am not understanding about the rails assets pipeline?

Upvotes: 1

Views: 2091

Answers (2)

Maxence
Maxence

Reputation: 2339

Your master css file is done through app/assets/stylesheets/application.css file.

For example : 

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

The above code will include in the application.css master file all of the mentionned css files, whether they are located in app/assets app/lib or app\vendor.

You master file is called in views/layouts/application.html.erb

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

As you can see I have a separate file for the current controller. And also a yield tag for extra CSS I would like to add when needed.

Also one note about your files: SASS is a preprocessor of CSS. It is better to name your files whatever.css.scss than whatever.scss. I got some problems getting the SASS helpers work properly because of this: Sass rails seems to generate a different logical path than in manifest

Upvotes: 0

Viktor Nonov
Viktor Nonov

Reputation: 1512

The confusion comes from the fact that SASS overrides the @import directive in a way.

In your case the pure CSS' @import directive is used since your are passing url(.., which as you noticed makes HTTP request for every file.

In order to use the SASS' version of @import (which will import and combine the contents), you need to pass the files in quotes:

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

Here's a detailed explanation about SASS' @import

Upvotes: 1

Related Questions