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

Question

Ember CLI docs says about /app/styles folder following:

Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into app.css.

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

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

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

That worked with 0.0.46, although not optimal because of more request were made to server. Now I updated to 0.1.1 and files one.css and two.css are no longer copied to /dist/assets folder.

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

Updated

Here is the snippet of Brocfile.js showing how we concatenate 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]);

We manually add files to inputFiles array.

Thanks for the update, @stephanav. Did you manage to get the resulting CSS file fingerprinted and used in index.html? — chopper
– chopper, Commented Apr 13, 2015 at 17:55

denis.peplin · Accepted Answer · 2014-10-10 04:36:50Z

1

It's known issue with 0.1.1 version: Static css compiler broken (0.1.x regression)

You probably should wait for update.

As for main question, try broccoli-concat.

answered Oct 10, 2014 at 4:36

denis.peplin

9,9093 gold badges50 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stepanhav Over a year ago

Thanks for reply. Broccoli-concat did what I wanted.

chopper Over a year ago

@stepanhav - I have the same problem. Could you share how you went about that?

Robin · Accepted Answer · 2015-11-14 10:10:14Z

0

Now there is this ember-cli-concat add-on available: https://github.com/sir-dunxalot/ember-cli-concat.

Looks super easy to use: https://github.com/sir-dunxalot/ember-cli-concat/wiki/Installation

answered Nov 14, 2015 at 10:10

Robin

9157 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related