Search code examples
ember.jsember-clicompassbroccolijs

How to set different Compass configuration options for environments in Broccoli?


I'm currently using the ember-cli-broccoli-compass plugin for compiling my SASS. However I'm having trouble being able to assign the HTTP path for image assets in the stylesheets for different environments. This is what I have so far:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp(
{
    compassOptions: 
    {
        httpPath: 'http://s3-eu-west-1.amazonaws.com/alua/',
        generatedImagesPath: 'http://s3-eu-west-1.amazonaws.com/alua/'
    }
});

When building the application for production (ember build -prod), it prepends the correct S3 path for the image assets in the stylesheets. However when running the application with ember server --proxy http://localhost:3000 the assets are built using the S3 path and not the local desired path of http://localhost:4200

How do I have environment specific Compass options for the httpPath when building image asset paths?


Solution

  • With EmberApp.env() you can get the current environment. For instance:

    Running ember build returns "development" and ember build -prod returns "production".

    So in the worst scenario, where an addon doesn't provider options by environment, you are able to do this:

    var env = EmberApp.env();
    var compassOptions;
    
    if (env === 'development') {
      compassOptions = your dev options;
    } else if (env === 'test') {
      compassOptions = your test options;
    } else if (env === 'production') {
      compassOptions = your production options;
    }
    
    var app = new EmberApp({
      compassOptions: compassOptions
    });
    
    module.exports = app.toTree();
    

    I hope it helps