How to compile project's CSS files into one file

Question

By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files).

What is the best way to configure ember-cli to merge all files in app/styles (and subdirectories) into one app.css file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override EmberApp.styles()?

Update: As far as I can see there are the following (not very elegant) options:

1) Using SASS and @import the CSS files into app.scss individually. The downside of this is that I need to use an extra plugin (SASS) and that SASS does not seem to allow for globbing patterns in @import (e.g. @import('**/*.scss')), which makes this solution cumbersome for big projects.

2) Overriding EmberApp.styles() such that it does not copy the CSS files (this is currently being done by a wrapper around broccoli-static-compiler) and configuring Broccoli such that it concatenates the css files into app.css. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.

3) Workaround: Use broccoli-funnel and broccoli-concat to do the concatenation yourself.

In Brocfile.js:

var appTree = app.toTree()

var concatenated = concat(appTree, {
  inputFiles: [
    '**/*.css'
  ],
  outputFile: '/assets/app.css',
});

module.exports = mergeTrees([appTree, concatenated], { overwrite: true });

This will create a new app.css with all our concatenated CSS in /assets/app.css.However, this file not fingerprinted. Our assets directory now looks something like this:

/assets/app.css
/assets/app-<fingerprint>.css

So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted app-<fingerprint>.css, 2) delete app-<fingerprint>.css and 3) rename app.css to app-<fingerprint>.css. This last step can be automated using Grunt or gulp.

Ours does this? view source here: http://test.sonatribe.com/ — , Feb 26 '15 at 12:58
Might not be the answer you're looking for but using sass and `@import filename` in app.scss will concat the files. — Patsy Issa, Feb 26 '15 at 17:18
Yes, I've considered that, but that's a bit of a workaround. Also I think @import does not allow for the use of globbing patterns, so I would need to include every stylesheet manually — chopper, Feb 26 '15 at 18:15

LocalPCGuy · Answer 1 · 2018-06-21T14:44:25.133

Personally, I think SCSS would be the way to go. It is the simplest solution and there are other advantages to using SCSS besides importing things into one file (variables for repeated patterns, for example).

In addition, manually adding files allows the developer to configure exactly where each piece of code is included. I don't see that as a con, but I can understand the other point of view and I've definitely spent 5m trying to figure out why my styles weren't being applied until I realized it was because I didn't include a new style file.

Edit: There are some node-sass globbing solutions available that could probably be added if that is a big show stopper.

How to compile project's CSS files into one file

1 Answers1