Tengo una solución para esto. Simplemente cree el componente raíz de su biblioteca sin encapsular la vista y todos sus estilos serán globales.

mi-biblioteca.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() { } }

mi-biblioteca.componente.html

 <!-- html content -->

mi-biblioteca.componente.scss

 @import './styles/core.scss';

Ahora su my-library.component.scss y core.scss son globales

estilos/core.scss

 body { background: #333; }

core.scss es opcional, solo me gusta mantener limpios los archivos raíz.

Actualización : en caso de que también desee sus mixins y variables, siga esta respuesta .

De Compilar css en las nuevas bibliotecas de Angular 6 :

1. instale algunas devDependencies en nuestra biblioteca para agrupar el css:

   • ng-packagr
   • scss-paquete
   • ts-nodo

2. Crear css-bundle.ts:

    import { relative } from 'path'; import { Bundler } from 'scss-bundle'; import { writeFile } from 'fs-extra'; /** Bundles all SCSS files into a single file */ async function bundleScss() { const { found, bundledContent, imports } = await new Bundler() .Bundle('./src/_theme.scss', ['./src/**/*.scss']); if (imports) { const cwd = process.cwd(); const filesNotFound = imports .filter(x => !x.found) .map(x => relative(cwd, x.filePath)); if (filesNotFound.length) { console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`); throw new Error('One or more SCSS imports failed'); } } if (found) { await writeFile('./dist/_theme.scss', bundledContent); } } bundleScss();

3. Agregue _theme.scss dentro del directorio /src de la biblioteca que realmente contiene e importa todo el css que queremos agrupar.

4. Agregue el script postbuild npm para ejecutar css-bundle.ts

5. Inclúyalo en la etiqueta de estilos en su aplicación en angular.json

De esta solución de problema

Instale cpx y scss-bundle como dependencias de desarrollo para su package.json . Luego agregue las siguientes entradas en su propiedad "scripts" de package.json:

 "scripts": { ... "build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets", "build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss", "cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"", ... }

Reemplace "mylib" con el nombre real de su biblioteca y luego ejecútelo en su terminal build-mylib . Eso compilaría sus activos scss en su carpeta dist.

Utiliza estos estilos globales en su proyecto Angular real, simplemente impórtelos en su archivo angular.json dentro de la configuración de su proyecto:

 "styles": [ "src/styles.scss", "dist/my-shiny-library/_theme.scss" ],

(use dist si su proyecto está en el mismo espacio de trabajo, o node_moduled si es una biblioteca importada)

Como ya señaló @codeepic , actualmente existeuna solución estándar .

En ng-package.json agregar

 "assets": ["./styles/**/*.css"]

Las rutas proporcionadas deben ser las rutas a sus archivos. Al mismo tiempo, serán las rutas dentro de su carpeta /dist .
En la compilación, los archivos se copiarán en /dist . Los usuarios de su biblioteca podrán agregarlos a sus estilos globales de la siguiente manera.

 /* styles.css */ @import url('node_modules/<your-library-name>/styles/<file-name>');

De esta manera puedes copiar cualquier tipo de archivos.

PS Cuando se usa con CSS, no olvide que puede crear un archivo index.css que se puede importar como node_modules/<your-library-name>/styles .