Angular (+ CLI) 6.0.0: Global styles for libraries

[jhuenges]

Versions

Angular CLI: 6.0.1
Node: 8.9.4
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.1
@angular-devkit/core         0.6.1
@angular-devkit/schematics   0.6.1
@schematics/angular          0.6.1
@schematics/update           0.6.1
rxjs                         6.1.0
typescript                   2.7.2

Repro steps

• Step 1: generate a new library
• Step 2: add some global styles to the library
• Step 3: run ng build your-library
• Step 4: global styles are not in ./dist

Observed behavior

The global styles from the library are not copied/used

Desired behavior

Global styles inside a library should be part of the generated output. I know that I could use component level styles (this works). However this doesnt work in all use cases. For example I have some css to style buttons but I dont have a ButtonComponent (and I dont want one) since I am only modifying the html <button> tag with the css and I am not adding some behaviour.

Mention any other details that might be useful (optional)

[kroeder]

I tried to add styles: [] in my angular.json but get a

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles).

https://github.com/angular/angular-cli/wiki/stories-global-styles shows, how to use global styles. This does not work when you add them into your library json configuration

  "my-library": {
      [...]
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            [...]
            "styles": [
              "styles/styles.scss"
            ]
  [...]

The documentation feels misleading since this does work for app builds but not for libraries.
Or am I doing something wrong?

[clydin]

The options are particular to the referenced builder (in this case, "builder": "@angular-devkit/build-ng-packagr:build",). Both it and ng-packagr would need to add support to allow for such an option.

[kroeder]

Okay - I've used ng-packgr before. Afaik there's no support for global css in ng-packagr and I had to add own build steps in order to get this running

Since having a global css file seems to me like a common thing, is there any plan to collab with the ng-packagr project on this?

[jhuenges]

Any update on this?

[kroeder]

@jhuenges if it helps, here's a gulp task snippet as workaround (or long-term solution, depending on what the angular team is planning 😃 )

The snippet includes:

• Building with ng build my-lib --prod
• Merging different (s)css files into one and concat them
• Copy additional assets, e.g. font-files

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const run = require('gulp-run');

const projectName = 'your-library';
const distDir = './dist/' + projectName;

gulp.task('build:angular-package', function () {
    return run('ng build ' + projectName + ' --prod', {}).exec();
});

gulp.task('build:sass', ['build:angular-package'], function () {
    return gulp.src(['./src/lib/styles/styles.scss', './src/assets/**/*.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('styles.css'))
        .pipe(gulp.dest(distDir));
});

gulp.task('build:copy-assets', ['build:angular-package'], function () {
    return gulp.src(['src/assets/fonts/icons8/*', 'src/assets/fonts/opensans/v15/*'])
        .pipe(gulp.dest(distDir));
});

gulp.task('build', [
    'build:angular-package',
    'build:sass',
    'build:copy-assets'
]);

I had to change a couple of things since we have a slightly different custom-build but it should give an idea on how you can solve this.

Of course you need to install the necessary gulp-packages.

[jhuenges]

Thanks! I will try to use this, but an official solution would be great :)