SASS/LESS pre-compilation and altering generated file prefixes

[intellix]

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

[wesleycho]

My work in #115 should pave the way for adding LESS/SASS/SCSS support, assuming after review/modifications it is accepted.

[friksa]

+1 for Sass

[wearska]

+1
Actually waiting for this to start using it. Can't just write plain css... :|

[wearska]

The above code doesnt work for me..

If 'ng-server' is running, when a new component is generated, (I've added a "name_.scss" file to the blueprints), when I change the .scss file, the .css file does not get compiled. As soon as I restart the server, it compiles successfully and also after every change. But when a new component is generated, it won't compile. Basically, the server is not watching for changes in the newly added .scss file, even though it logs its creation when the component is generated.

[intellix]

I believe the newly added file problem plagues most generators :)

[hansl]

Closing this as we are definitely taking LESS and SASS into account for third party libraries. See #255.

[angular-automatic-lock-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.}