I was trying to add global styles in the same way like in angular app, but it totally does not work.
My libraries' name is example-lib, so I added styles.css
to /projects/example-lib/
. I added styles in main angular.json
file:
... "example-lib": { "root": "projects/example-lib", "sourceRoot": "projects/example-lib/src", "projectType": "library", "prefix": "ngx", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/example-lib/tsconfig.lib.json", "project": "projects/example-lib/ng-package.json", "styles": [ "projects/example-lib/styles.css" <!-- HERE ], }, ...
But when I tried build library using command:
ng build example-lib
I got error:
Schema validation failed with the following errors: Data path "" should NOT have additional properties(styles)
I guess that is the other way to add global styles in separate library. Anyone can help me?
Angular components can be styled via global CSS the same as any other element in your application. Simply drop a `<link>` element on your page (typically in index. html) and you're good to go!
The best way to add global styles is with a shared layout component. This layout component is used for things that are shared throughout the site, including styles, header components, and other common items. NOTE: This pattern is implemented by default in the default starter.
There are several ways to add styles to a component: By setting styles or styleUrls metadata. Inline in the template HTML. With CSS imports.
I have a workaround for this. Just create the root component of your library without view encapsulation and all its styles will be then global.
my-library.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'lib-my-library', templateUrl: './my-library.component.html', styleUrls: ['./my-library.component.scss'], encapsulation: ViewEncapsulation.None }) export class MyLibraryComponent implements OnInit { constructor() { } ngOnInit() { } }
my-library.component.html
<!-- html content -->
my-library.component.scss
@import './styles/core.scss';
Now your my-library.component.scss and core.scss are global
styles/core.scss
body { background: #333; }
core.scss is optional, I just like to keep the root files clean.
Update: In case you want your mixins and variables too, then follow this answer.
As @codeepic already pointed out, there is currently a standard solution.
In ng-package.json add
"assets": ["./styles/**/*.css"]
The provided paths should be the paths to your files. At the same time, they will be the paths inside your /dist folder.
On build, the files will be copied to /dist. Users of your library will be able to add them to their global styles as follows.
/* styles.css */ @import url('node_modules/<your-library-name>/styles/<file-name>');
This way you can copy any type of files.
P.S. When used with CSS, do not forget that you can create an index.css file that can be imported just like node_modules/<your-library-name>/styles
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With