Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 520
stepanhav Avatar asked Oct 09 '14 18:10

stepanhav


1 Answers

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.

like image 86
denis.peplin Avatar answered Nov 04 '22 03:11

denis.peplin