SASS: How to substitute imports before build (Ember project)

Question

I have Ember JS project and the main scss file ( app.scss ), I have an ENV variable (STYLE_NAME).

I need to replace the content of app.scss pasting @import 'STYLE_NAME'; Where STYLE_NAME - is a string from process.env.STYLE_NAME;

I have lot of STYLE_NAME scss files in the same folder.

So, by executing the console command env STYLE_NAME=theme1 ember build , I need to get app.scss with the following content:

...
...
...

@import 'theme1';
@import 'main'; // this import is always the last one

Answer 1

If I needed to do this in my own app, I would avoid making the import name dynamic.

Your .scss file simply does:

@import 'theme';
@import 'main'; // this import is always the last one

And then in your ember-cli-build.js file, you use the process.env.STYLE_NAME to grab the theme from the correct directory.

'use strict';

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

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: [
        `vendor/${process.env.STYLE_NAME}/theme`
      ]
    }
  });

  return app.toTree();
};

So in the end, each "brand" would get its own directory somewhere (I arbitrarily chose vendor for the example). Then when running / building, you do something like STYLE_NAME='brand1' ember s and the right file is included. You then just make sure that each theme directory follows the same structure.

If this doesn't work for you for some reason, you could have a look at broccoli-funnel for dynamic including the files you need during build time.