SASS/LESS pre-compilation and altering generated file prefixes

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 });
}

[wearska]

+1 Actually waiting for this to start using it. Can’t just write plain css… 😐

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}