How to view individual css when using @import in rails resource pipeline in development

I call several styles in application.css.scsswhich contain the require directive and@import

Current

*= require font
*= require font-awesome
*= require twitter/bootstrap
@import "bourbon";
@import "app_css_that_uses_bourbon_mixins

To use the bourbon gem (from the thinker), I have to use the @import syntax. However, when I start using @import, I lose the ability to view individual css files in development mode. But, when I use *= require directive, I can view the css files individually in design mode. I believe that these properties (viewing individual, non-concatenated files) are derived from " config.assets.debug = true", which is the setting in my application.

Since there are several csss, it’s difficult for me to debug them when the stars combine them, I would like to be able to 1. Be consistent in using the syntax @import 2. Be able to view individual css files for debugging in development mode.

Want to

@import "bourbon";
@import "font-awesome";
@import "twitter/bootstrap";
@import "app_css_that_uses_bourbon_mixins
.....

Appreciate any help.

+4
source share
1 answer

I would give up the need and stick to the whole import and explicitly list each file.

I'm not sure if this is any help, but you can just view the url for your individual stylesheets. Say for example, I have signin.css.scss - I can go to

http://localhost:3000/assets/signin.css

This will show the contents of the files!

, , dev.

-1

All Articles