CODEWITHSUNDEEP
ember.jsember-clibroccolijs
Abel
Abel

Reputation: 51

Including specific style sheets or javascript in ember-cli-build

The problem

I am working on an Ember.js project which has different versions (products) for different clients. Though the functionality is more or less the same, the styling of each product differs big time. Hence we have "default" and product specific style sheets. I have been asked to modify the build code so that only the corresponding .css (.less) files are compiled into the final app.

Originally I was looking at this issue from the wrong side: I tried to exclude the folders containing the unnecessary files with little success. Only then did I realize that it makes more sense not to include the product specific files by default and add them to the tree during the build.

The solution

After changing my point of view I found out there is another way around. I changed the style sheets so that all the "default looks" went into an import-base.less and I created an import-[name_of_product].less for each of the products, with the latters containing the import statement to the default looks, so I only have one file to build. Using the outputPaths option in EmberApp and assuming that the name of the product is stored in the process environmental variable called FLAVOUR my code looks as follows.

// ember-cli-build.js

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  // y u do dis
  const options = { outputPaths: { app: { css: { app: false } } } };

  const lessFileName = 'import-' + process.env.FLAVOUR.toLowerCase();
  options.outputPaths.app.css[lessFileName] = 'assets/application.css'

  const app = new EmberApp(defaults, options);

  return app.toTree();
};

There is always something

The only problem with that code is that it still needs an app.less and that line of code or else the build fails, couldn't (haven't had time to) figure out a solution.

I also have to mention that the above solution doesn't resolve the original problem, which was:
How to exclude specific files from the working directory before using app.toTree() so that they wouldn't increase file size unnecessarily. Lux was so kind and pointed out that probably in-repo-addons are to be used for such purposes. Yet again, haven't had time to check. :(

Upvotes: 1

Views: 395

Answers (1)

Lux
Lux

Reputation: 18240

I think you can just use funnel!

something like this:

return new Funnel(app.toTree(), {
  include: ['**/*']
  exclude: ['styles/*.css']
});

general you can do anything you can do in a Brocfile in your ember-cli-build.js!

Upvotes: 1

Related Questions