title: How to compile project's CSS files into one file
body: <p>By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files). </p>
  
  <p>What is the best way to configure ember-cli to merge all files in <code>app/styles</code> (and subdirectories) into one <code>app.css</code> file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override <code>EmberApp.styles()</code>?</p>
  
  <hr>
  
  <p>Update: As far as I can see there are the following (not very elegant) options:</p>
  
  <p>1) Using SASS and <code>@import</code> 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 <code>@import</code> (e.g. <code>@import('**/*.scss')</code>), which makes this solution cumbersome for big projects.</p>
  
  <p>2) Overriding <code>EmberApp.styles()</code> such that it does not copy the CSS files (this is currently being done by a wrapper around <code>broccoli-static-compiler</code>) and configuring Broccoli such that it concatenates the css files into <code>app.css</code>. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.</p>
  
  <p>3) Workaround: Use <code>broccoli-funnel</code> and <code>broccoli-concat</code> to do the concatenation yourself. </p>
  
  <p>In Brocfile.js:</p>
  
  <pre><code>var appTree = app.toTree()
  
  var concatenated = concat(appTree, {
    inputFiles: [
      '**/*.css'
    ],
    outputFile: '/assets/app.css',
  });
  
  module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
  </code></pre>
  
  <p>This will create a new <code>app.css</code> with all our concatenated CSS in <code>/assets/app.css</code>.However, this file not fingerprinted. Our assets directory now looks something like this: </p>
  
  <pre><code>/assets/app.css
  /assets/app-&lt;fingerprint&gt;.css
  </code></pre>
  
  <p>So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted <code>app-&lt;fingerprint&gt;.css</code>, 2) delete <code>app-&lt;fingerprint&gt;.css</code> and 3) rename app.css to <code>app-&lt;fingerprint&gt;.css</code>. This last step can be automated using Grunt or gulp. </p>