Is it possible to get Yeoman to serve separate (non-combined) CSS files in development #752

Closed
aexmachina opened this Issue Nov 29, 2012 · 8 comments

Projects

None yet

5 participants

@aexmachina

This would make it easier to see which SASS file the CSS is coming from in the Dev Tools inspector. It could also reduce the time it takes for changes to be shown in the browser because Compass would only have to re-create those files that had changed, rather than the whole main.css.

Also it'd be great to be able to get Compass to include source maps in the CSS so that we can use the Dev Tools SASS support to edit the SASS directly in the Sources view. This can be enabled in the Rails asset pipeline by adding sass_options = { :debug_info => true } in config/compass.rb, but I haven't been able to get it to work in the Yeoman Gruntfile.

Thanks for an awesome tool!

@robbevan

You can do this by passing compass a config file:

In your gruntfile.js

   // compile .scss/.sass to .css using Compass
    compass: {
      dist: {
        options: {
          config: 'config/compass.rb',
          force: true
        }
      }
    },

and then adding

sass_options = { :debug_info => true }

to config/compass.rb along with your other options.

@aexmachina

Great, thanks for that. But it's not working yet. I've got this in Gruntfile.js:

    compass: {
      dist: {
        options: {
          config: 'config/compass.rb',
          force: true
        }
      }
    },

and this in config/compass.rb:

sass_options = {
  :debug_info => true,
  :css_dir => 'temp/styles',
  :sass_dir => 'app/styles',
  :images_dir => 'app/images',
  :javascripts_dir => 'temp/scripts'
}

but when I run yeoman server it says Nothing to compile. If you're trying to start a new project, you have left off the directory argument.

@robbevan

The other settings are not sass_options, try this:

css_dir = "temp/styles"
sass_dir = "app/styles"
images_dir = "app/images"
javascripts_dir = "temp/scripts"
sass_options = { :debug_info => true }
@aexmachina

Yes thanks for that. I had assumed that all of those settings would go in the sass_options variable...?

@rwam

In your Gruntfile.js use this:

    compass: {
      dist: {
        // http://compass-style.org/help/tutorials/configuration-reference/#configuration-properties
        options: {
          css_dir: 'temp/styles',
          sass_dir: 'app/styles',
          images_dir: 'app/images',
          javascripts_dir: 'temp/scripts',
          debug_info: true,
          force: true
        }
      }
    },

works fine for me

@aexmachina

Yes, you're right that works for me now too, although that is what I initially tried. Maybe with the previous version it didn't work?

How can I prevent the debug info being included when I do yeoman build? It's bloating my main.css file in production.

@sindresorhus
Yeoman member

You can't. It will be possible though in 1.0. Soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment