So I was looking at adding SASS compilation to the build process of this. Typically in the past I've been telling it to compile particular files (app.scss and vendor.scss) but with ng2 and it's Shadow DOM style encapsulation I guess it's going to make sense to have a .SCSS per component.
I suppose my issue is that alongside this, we need a way to alter the pre-generated .css to have a .scss prefix instead.
SASS compilation was achieved (for anyone else interested):
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
var _ = require('lodash');
var glob = require('glob');
module.exports = function(defaults) {
var app = new Angular2App(defaults);
var app = app.toTree();
var styles = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
sassFile = sassFile.replace('src/', '');
return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
}));
return mergeTrees([styles, app], { overwrite: true });
}
So I was looking at adding SASS compilation to the build process of this. Typically in the past I've been telling it to compile particular files (app.scss and vendor.scss) but with ng2 and it's Shadow DOM style encapsulation I guess it's going to make sense to have a .SCSS per component.
I suppose my issue is that alongside this, we need a way to alter the pre-generated .css to have a .scss prefix instead.
SASS compilation was achieved (for anyone else interested):