g13013 / broccoli-compass Goto Github PK

Next step

I have next configuration

const rootDir = 'src';

const styles = pickFiles(rootDir, {
  srcDir: 'styles'
});

const compassTree = compileSass(styles, {
  outputStyle: 'expanded',
  sassDir: '.',
  cssDir: '.',
  compassCommand: 'bundle exec compass',
  imagesDir: path.join(__dirname, '/src/images'),
  config: path.join(__dirname, '/compass.rb')
});

module.exports = compassTree;

after compilation broccoli build ./static/styles I have next folder structure

Why does it happen? Why do all scss files are copied? If I try to compile only one specific file (adding files: ['application.scss'] to configuration) I have an error: Individual stylesheets must be in the sass directory.

I'm using:
compass v1.0.3
sass v3.4.18
ruby v2.2.2p95
broccoli v0.16.7
node v0.12.0

ps I've working also with middleman and using the same compass and sass versions and it works great, so I think it is not versions problems.

My build keeps failing because the path generated for .sass-cache has reached the OS limitation.
.........{my_path}........./tmp/tree_merger-tmp_dest_dir-6RqhWvoS.tmp/.sass-cache/07b080cf80e900d3237fcd17450769c4d2640ca1/_background-origin.scssc20141029-12616-ebwe9i
I am aware I could make use of symbolic links to shorten my path but I would like a different fix and make use of the compass/sass cache location options.

I've tried several ways but none seem to be reflected in the final compass compile command I see in the console.

Brocfile

  return compileCompass(mergedTrees, 'app/styles/app.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app/styles',
    imagesDir: 'assets/images',
    fontsDir: 'assets/fonts',
    cssDir: 'assets/apps/' + appName + '/css',
    sassOptions: { cache_location: '/tmp'}
  });

What I've tried
sassOptions: { cache_location: '/tmp'}
as per http://sass-lang.com/documentation/file.SASS_REFERENCE.html#options

sassOptions: { cacheLocation: '/tmp'}

cachePath: '/tmp'
as per http://rok3.me/programming/compass-set-cache-location/

This section in the README says:

var compileSass = require('broccoli-compass');
var compassTree = compileSass(tree, files, {
    outputStyle: 'expanded' //include here compass options. Note: some options might be ignored as they are automatically filled
  });

... however, it does not say where to put it. I'm new to ember-cli and broccoli, so I was not able to figure it out - where does it go?

I assume that the variables compileSass and compassTree should be add to something too, but not sure what to.

My Brocfile.js contains the following:

var compileCompass = require('broccoli-compass');
app.styles = function() {
  return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: this.name + '/styles',
    imagesDir: 'public/images',
    cssDir: '/assets'
  });
};

I keep getting the error:

[broccoli-compass] Error:  Command failed: . 
The command-line arguments was: 
`compass compile my-app/styles/app.scss --relative-assets --sass-dir my-app/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_dest_dir-Va0F4KhL.tmp/assets"

Any ideas? I'm using ember-cli and it seems this configuration is working for others, just not me.

Maintain the ember-cli addon

I'm a bit confused why is it looking for compass-rails instead of just compass?
Either way I installed all

gem install compass
gem install compass-rails
gem install sass

app.styles = function() {
  var vendorTree = this._processedVendorTree();
  var stylesTree = pickFiles(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styleszzz'
  });
  var vendorPlusStyleTrees = mergeTrees([vendorTree, stylesTree, 'public']);

  // rename app/styles/app.scss to <your app name>.scss
  return compileCompass(vendorPlusStyleTrees, 'app/styles/*.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets'
  });
};

All passed and when I run ember build with this plugin I get this error

[broccoli-compass] stderr:
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails

File not found: app/styles/*.scss

    at ChildProcess.exithandler (child_process.js:648:15)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:756:16)
    at Socket.<anonymous> (child_process.js:969:11)
    at Socket.emit (events.js:95:17)
    at Pipe.close (net.js:465:12)

https://github.com/g13013/broccoli-compass/blob/master/index.js#L50

I am using broccoli-compass in Brocfile.js like this.

However, the CSS generated contains image paths like this:

background: url('../../tree_merger-tmp_dest_dir-uum1Ex0x.tmp/assets/images/icon-s0ece3a86d5.png') no-repeat;

(See question asked on Stackoverflow for more details)

How can this be avoided?

I would like to compile scss files which contains compass helpers (spriting) with broccoli-compass. Sass compilation is actually very slow (= 12 sec). I am running on a symfony project and don't use ember. I do not really understand how to convert my Gruntfile or config.rb into broccoli-compass file.
If broccoli-compass uses compass to compile will it be as slower as a compass compilation ?
Anyone could help me ?

this is the config.rb I am using

line_comments = false
output_style = :compressed
project_path = 'src/Project/DPBundle/Resources'
css_dir = 'public/css'
sass_dir = 'sass'
images_dir = 'public/images'
http_path = '/'
http_images_path = '/bundles/projectdp/images/'
http_generated_images_path = '/bundles/projectdp/images/'
relative_assets = false
sourcemap = true

This is what i get

A simple project takes a good 2-3 seconds. The worst part is for any little change this delay is always there, it's not so much in the spirit of broccoli unfortunately. Any tips for improving performance?

Not sure if this is the right place to ask this, but I'm having a hard time figuring it out.

My Brocfile was working great, until I recently upgraded Ember CLI to 0.39. Here's the code:

app.styles = function() {
  return compileCompass(this.appAndDependencies(), 'app/styles/' + this.name + '.scss', {
    compassCommand: 'bundle exec compass',
    outputStyle: 'expanded',
    sassDir: 'app/styles',
    imagesDir: 'public/images',
    cssDir: '/assets'
  });
};

I get this error:

[broccoli-compass] Error:  Command failed: Errno::ENOENT on line ["155"] of ~/.rvm/gems/ruby-2.1.1/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory @ rb_sysopen - ~/campaign-designer/tmp/tree_merger-tmp_dest_dir-JljP7ZaY.tmp/app/styles/campaign-designer.scss
Run with --trace to see the full backtrace


arguments: `bundle exec compass compile app/styles/campaign-designer.scss --relative-assets --sass-dir app/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_cache_dir-JPdd4ckH.tmp/assets"`

Interestingly, when I run the command given by arguments, it works. Any ideas?

I'm trying to add vendor to my import path, so I can use @include in my SASS files.

Here's my config:

app.styles = function() {
  return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: this.name + '/styles',
    imagesDir: 'public/images',
    cssDir: '/assets',
    additionalImportPaths: ['/vendor']
  });
};

But, I get an error:

Error: Command failed: . The command-line arguments was: compass compile campaign-designer/styles/app.scss --relative-assets --sass-dir campaign-designer/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_dest_dir-UvKrRTsR.tmp/assets" --additional-importpaths /vendor

Any ideas?

I am using this with ember-cli v0.0.44 and it is very large project with thousands of files.

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: EMFILE, open 'project_path/tmp/tree_merger-tmp_dest_dir-b2gQJVAN.tmp/bower_components/bootstrap-datepicker/tests/run-qunit.js'

This line copies all files from project to tmp and it is the root of error. Is copying all files needed at all?

Can we opt into a whitelist only mode?

A quick solution would be:
Would it be possible to expose ['**/*\] as a configuration, so a user can easily choose to whitelist instead of black listing?

https://github.com/g13013/broccoli-compass/blob/master/index.js#L57

'!**/*.js',
'!**/*.html',
'!**/*.md',
'!**/*.xml'

or maybe a more extensive but configurable whitelist?

@g13013 I am using your library and I am unable to import images icons to generate sprites for css generation. Is there a step that I must do in order to make this work with compass?

Thanks,
Adam

I tried to go down this path with pretty crazy hacks in timmfin/broccoli-compass@f454d6c...reuse-sass-cache-dir, but it didn't pan out as I expected... I verified the .sass-cache was re-used across builds via prints inside of Sass code, but it seemed to only improve performance by 10%-20% (I very well may have been missing something though).

Anyway, figured I'd bring it up in case anyone else wants to take a stab.