Как добавить глобальный стиль в библиотеку angular 6/7

У меня есть обходной путь. Просто создайте корневой компонент вашей библиотеки без инкапсуляции представления, и все его стили станут глобальными.

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';

Теперь ваши my-library.component.scss и core.scss являются глобальными.

styles / core.scss

body {
    background: #333;
}

core.scss не является обязательным, я просто хочу, чтобы корневые файлы были чистыми.

Обновление: если вам тоже нужны миксины и переменные, следуйте этому ответу.

Из Компиляция css в новых библиотеках Angular 6:

1. установите некоторые devDependencies в нашу библиотеку, чтобы связать css:

   • ng-packagr
   • scss-пакет
   • ts-узел

2. Создайте 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. Добавьте _theme.scss в каталог / src библиотеки, которая фактически содержит и импортирует все CSS, которые мы хотим связать.

4. Добавьте сценарий postbuild npm для запуска css-bundle.ts

5. Включите его в тег стилей в вашем приложении в angular.json

Как уже указывал @codeepic, в настоящее время существует стандартное решение.

В ng-package.json добавьте

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

Предоставленные пути должны быть путями к вашим файлам. В то же время это будут пути внутри вашей папки / dist.
При сборке файлы будут скопированы в / dist. Пользователи вашей библиотеки смогут добавлять их в свои глобальные стили следующим образом.

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

Таким образом вы можете копировать файлы любого типа.

P.S. При использовании с CSS не забывайте, что вы можете создать файл index.css, который можно импортировать так же, как node_modules/<your-library-name>/styles.

Из этого решения проблемы

Установите cpx и scss-bundle как зависимости Dev в свой package.json. Затем добавьте следующие записи в свойство "scripts" 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\"",
  ...
}

Замените «mylib» на свое настоящее имя библиотеки, а затем просто запустите в своем терминале build-mylib. Это скомпилирует ваши ресурсы scss в папку dist.

Вы используете эти глобальные стили в своем реальном проекте Angular, просто импортируйте их в свой angular.json файл в настройках проекта:

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

(используйте dist, если ваш проект находится в той же рабочей области, или node_moduled, если это импортированная библиотека)