Provide a way to compile less or sass application

[ghost]

Hello,

Perhaps I have miss something in the documention, but since component style are kinda hard to override from external , it would be great if you can by default process less and sass application.

Exemple to process less application in "src/less/**" : gulpfile.js

var p = require('gulp-load-plugins')();
var less = require('gulp-less');
var cleanCSS = require('clean-css');

/**
 * Process less application
 */
gulp.task('process-css', function () {
  var src = ['src/less/**/*.less'];

  return gulp.src(src)
    .pipe(less({}))
    .pipe(p.concat('styles.css'))
    .pipe(p.sizereport({
      gzip: true,
      total: false,
      minifier: function (contents, filepath) {
        return new cleanCSS().minify(contents).styles;
      }
    }))
    .pipe(p.cleanCss())
    .pipe(gulp.dest('dist/styles'));
});

package.json file :

    "gulp-less": "3.1.0",
    "gulp-clean-css": "^2.0.6",
    "gulp-load-plugins": "^0.10.0",
    "gulp-sizereport": "^1.1.3",
    "gulp-concat": "^2.5.2"

Thanks

[jhuenges]

I guess I have a similar issue. I have a component library (working) but I also have a couple of styles (scss) with variables (like $buttonColor). Before using this generator I simply used a symlink to consume the library in my app. This allowed me to overwrite the variables in my app. How can I achieve this with the generator? Currently, I added a styles folder in the src folder but this won't work because it is not copied to the dist folder.

[ghost]

Hey,

I also consume my library in symlink and non symlink way, I dont understand what's the problem if your scss application is already copied in the dist folder. When you will consume your application you simply need to create a scss application in your new angular project and to import your library scss application. This way the new application will be the one who "compile" your library scss application.

1 : Create a scss file
2. Add this file in the angular-cli.json 3. Import your library scss application (who will be in node_modules) in your scss file 4. You can now override variables

[jvandemo]

@Ixoh — Would you be able to document your setup in a guide? Then we could add it to the WIKI page to help others if they have a similar need. Thanks in advance!

[ghost]

Hum yes I can manage to write a little documention.

About @jhuenges probleme, sorry I miss readed the last part of your comment : About the fact your style folder not being copied in the dist folder you can modify the gulpfile.js by adding :

//This task is used to copy everything from 'src/styles' into the dist folder gulp.task("copy-css", function () { var src = ['src/styles/**/*']; return gulp.src(src).pipe(gulp.dest('dist/styles')); });

and add it at the end of the compile task runSequence( .... , 'copy-css' , function (err).....

By doing this, your styles folder will be copied automatically in the dist folder at the end of the compilation.

[ghost]

I'm not working with scss application so I write this for "less" application, but normally it should work for both

Add and consume your library's less application

1. Create a "styles" folder in your application "src" folder
2. Create your main less file (we will name it my_library.less for exemple)
3. Currently the generator will not copy our new "styles" folder into the dist which will be a problem for us. To achieve this we can modifiy the gulpfile.js and add a task to copy this folder.

//This task is used to copy everything from 'src/styles' into the dist/styles folder
gulp.task("copy-css", function () {
var src = ['src/styles/**/*'];
return gulp.src(src).pipe(gulp.dest('dist/styles'));
});

and add it at the end of the 'compile' task runSequence( .... , 'copy-css' , function (err).....

4. Deploy your library

5. Update your consumer application : you will now see the "styles" your node_modules application package.

6. Import "/node_modules/mylibraryr/styles/my_library.less" in your consumer less application to be able to override your styles.

7. Enjoy

Perhaps we can modify the point 3 to make a generic folder who will see his content automatically copied in the dist folder

[jhuenges]

@Ixoh yes, I wrote the gulp task a couple of minutes after I posted this question. But thanks anyways!