imported css files are not compiled into application.css file

Question

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?

Viktor Nonov · Accepted Answer · 2018-10-16 05:28:57Z

1

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

edited Oct 16, 2018 at 5:28

answered Oct 16, 2018 at 5:01

Viktor Nonov

1,5221 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxence · Accepted Answer · 2018-10-16 07:47:35Z

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

Collectives™ on Stack Overflow

imported css files are not compiled into application.css file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related