Repository navigation
SASS/LESS pre-compilation and altering generated file prefixes #120
Description
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 });
}
Activity
wesleycho commentedon Dec 18, 2015
My work in #115 should pave the way for adding LESS/SASS/SCSS support, assuming after review/modifications it is accepted.
friksa commentedon Jan 4, 2016
+1 for Sass
wearska commentedon Jan 5, 2016
+1
Actually waiting for this to start using it. Can't just write plain css... :|
wearska commentedon Jan 20, 2016
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 commentedon Feb 24, 2016
I believe the newly added file problem plagues most generators :)
hansl commentedon Mar 17, 2016
Closing this as we are definitely taking LESS and SASS into account for third party libraries. See #255.
angular-automatic-lock-bot commentedon Sep 5, 2019
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.