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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With