Angular 6 library shared stylesheets
For global styles, I've answered it in this question.
Update
For ng-packgr
versions 9.x and above
Copying assest to output folder is now directly supported as explained in this page
{ "$schema": "./node_modules/ng-packagr/package.schema.json", "name": "@my/library", "version": "1.0.0", "ngPackage": { "assets": [ "CHANGELOG.md", "./styles/**/*.theme.scss" ], "lib": { ... } }}
Old Answer
**For other versions**- Create an
index.scss
file in your library's root folder. If you follow this guide from Angular, then your path will bemy-project/projects/my-library/index.scss
. This is also the folder where yourpackage.json
is.
So, index.scss
will be the file with your variables and mixins
$grey: #222;@mixin mymixin { background: #222;}
- Include this in you library scss files using
import
@import '../../index.scss';
or whatever relative path your component scss file is at.
- Now in order to have this file in your app project, copy it post build to the dist directory. To do this, edit your angular library's project's
package.json
file (NOT THE LIBRARY'S).
{ "name": "my-project", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build && npm run copyScss", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "copyScss": "xcopy \"projects\my-library\index.scss\" \"dist\\my-library\\\"" }, ...}
Now, very important, DO NOT use
ng build
to build your library, instead usenpm run build
. This will automatically execute the copy command. Now theindex.scss
file is exported along with your library in themy-project/dist
folder.Include the
index.scss
in your app project's scss files
// ~ stands for the node_modules folder@import '~my-library/index.scss';
Now you have all your library mixins in all of the projects you installed your library.
Cheers!
PS Workarounds are not the most elegant solutions, but when nothing else works, they work around!
Have you tried setting the encapsulation level of the component to none as part of the component metadata? Like this:
@Component({ selector: 'app-component', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None})
The ViewEncapsulation levels are:
- ViewEncapsulation.Emulated: The default, Angular emulates a Shadow DOM.
- ViewEncapsulation.Native: Use the browser's own Shadow DOM.
- ViewEncapsulation.None: Styles are Global
Check out the Angular Docs on ViewEncapsulation and I wrote a blog post on it.
I think people may be missing the fact that while encapsulation options exist, global styles are output in style tags and can cascade throughout your project.
Here is my setup:
My global styles: styles.scss is output in style tags. The rules target all matching classes and elements as expected. Even within components.
Component styles are encapsulated. That is their value prop. They overwrite globals and keeps component-specific styles with the component family.
@includes
such as variables.scss, mixins.scss etc. are included explicitly at the top of any component .scss files when needed.
@import '../../../../scss/includes/variables';
What else would we need?