CSS files not compiled in app.css as expected in Ember CLI?

Question

CSS files not compiled in app.css as expected in Ember CLI?

The Ember CLI docs mention the following /app/styles folder:

Contains your style sheets, whether it be SASS, LESS, Stylus, Compass or simple CSS (although only one type is allowed, see Asset Compilation). All of them are compiled in app.css.

I have the following files in /app/styles : app.css , one.css , two.css .

I would expect that when the server starts, a file called appName.css will appear in the / dist / assets appName.css , and the content will be a concatenation of all three files. Instead, there is only the contents of the app.css file. So I solved this with @import in app.css:

 @import url("one.css"); @import url("two.css");

This worked with 0.0.46, although not optimally, because more requests were made to the server. Now I upgraded to 0.1.1, and the files one.css and two.css no longer copied to the /dist/assets folder.

But the main question: how can I achieve concatenation of all css files in the /app/styles folder? Am I missing something basic or are there some commands that need to be included in Brocfile.js ?

Update

Here is a Brocfile.js showing how we merge our CSS files:

 var concat = require('broccoli-concat'); var cleanCSS = require('broccoli-clean-css'); var concatenatedCss = concat('app/styles', { inputFiles: [ 'reset.css', 'common.css', 'layout.css', ... ], outputFile: '/assets/appName.css', wrapInFunction: false }); if (app.env === 'production') { concatenatedCss = cleanCSS(concatenatedCss, {restructuring: false}); } module.exports = app.toTree([concatenatedCss]);