CODEWITHSUNDEEP
ember.jsember-cli
stepanhav
stepanhav

Reputation: 73

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

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.

Upvotes: 7

Views: 4199

Answers (2)

Robin
Robin

Reputation: 915

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

Upvotes: 0

denis.peplin
denis.peplin

Reputation: 9841

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.

Upvotes: 1

Related Questions