Why getting empty CSS files in Production?

Question

I had put many css files in the file active_admin.css.scss :

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";
@import "admin/plugins/*";
@import "admin/calendar";
@import "jquery-ui.css";
@import "admin/jquery.datepick.css";

But the files "jquery-ui.css" and "admin/jquery.datepick.css" are creating problems. I am getting the 404 Not Found error in the browser console for below :

http://staging.xxx.com/assets/jquery-ui.css
http://staging.xxx.com/assets/admin/jquery.datepick.css

I also checked the assets in browsers, these 2 files are present, but they don't have content inside it. I am using Nginx as my webserver in Ec2. All is working in development, but not in production.

My Ngnix is configured as mentioned in this answer. I am using Capistrano to deploy. Everything is working but not those 2 files.

I have the below settings in production.rb too :

config.assets.compile = true
config.assets.precompile += %w[active_admin.css active_admin.js]

And still it didn't work. I found the above suggestion from here.

Answer 1

Get rid of the file extensions in your @import declarations. It should be:

@import "jquery-ui";
@import "admin/jquery.datepick";