Библиотека стилей Angular 6

Question

Как вы можете настроить index.scss и импортировать глобальные таблицы стилей для переменных, миксины и т. Д. В библиотеку angular 6?

Angular CLI создает библиотеку с корневым компонентом и компонентом scss, но стили, добавленные или импортированные в корневой компонент, недоступны для дочерних компонентов.По умолчанию имеет смысл инкапсулировать стили, но я пока не могу найти никакой информации или примеров о том, как это настроить.

Пути angular.json "styles": [...], которые можно использовать для этого с"projectType": "application", похоже, тоже не работает с "projectType": "library".

Заранее спасибо за помощь!

---

ОБНОВЛЕНИЕ: Мой проект был запущен с использованием angular cli v6.0.5, следуя этому руководству: https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

TL; DR для руководства:

ng new my-app --style=scss
ng generate library my-library --prefix ml

Это файловая структура, угловая 6 генерирует:

    my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts
        index.scss
        index.html
      README.md

Версии пакета:

    Angular CLI: 6.0.5
    Node: 10.2.1
    OS: darwin x64
    Angular: 6.0.3
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.6.5
    @angular-devkit/build-angular      0.6.5
    @angular-devkit/build-ng-packagr   0.6.5
    @angular-devkit/build-optimizer    0.6.5
    @angular-devkit/core               0.6.5
    @angular-devkit/schematics         0.6.5
    @angular/cli                       6.0.5
    @ngtools/json-schema               1.1.0
    @ngtools/webpack                   6.0.5
    @schematics/angular                0.6.5
    @schematics/update                 0.6.5
    ng-packagr                         3.0.0
    rxjs                               6.2.0
    typescript                         2.7.2
    webpack                            4.8.3

Answer 1

Для глобальных стилей я ответил на этот вопрос в на этот вопрос .

Для смесей и переменных также есть обходной путь.

1. Создайте index.scss файл в корневой папке вашей библиотеки.Если вы следуете этому руководству из Angular , тогда ваш путь будет my-project/projects/my-library/index.scss.Это также папка, в которой находится package.json.

Таким образом, index.scss будет файлом с вашими переменными и миксинами

$grey: #222;
@mixin mymixin {
    background: #222;
}

Включите это в свои файлы scss библиотеки, используя import

@import '../../index.scss';

или любой другой относительный путь, по которому находится ваш компонентный файл scss.

Теперь, чтобы этот файл был в вашем проекте приложения, скопируйте его после сборки в каталог dist.Для этого отредактируйте файл package.json проекта вашей угловой библиотеки (НЕ БИБЛИОТЕКА).

{
    "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\\\""
    },

    ...
}

Теперь, очень важно, НЕ используйте ng build для построения своей библиотеки, вместо этого используйте npm run build.Это автоматически выполнит команду копирования.Теперь файл index.scss экспортируется вместе с вашей библиотекой в ​​папку my-project/dist.

Включите index.scss в файлы scss проекта вашего приложения

// ~ stands for the node_modules folder
@import '~my-library/index.scss';

Теперь у вас есть все ваши библиотечные миксины во всех проектах, в которых вы установили свою библиотеку.

Приветствия!

PS Временные решения не самыеэлегантные решения, но когда ничего не работает, они обходятся!

Answer 2

Вы пытались установить для уровня инкапсуляции компонента значение none, как часть метаданных компонента?Например:

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Уровни ViewEncapsulation:

• ViewEncapsulation.Emulated : по умолчанию Angular эмулирует теневой DOM.
• ViewEncapsulation.Native : использовать собственный Shadow DOM браузера.
• ViewEncapsulation.None : стили являются глобальными

Проверить Angular Docs на ViewEncapsulation , и я написал на нем сообщение в блоге .

Answer 3

Я думаю, что людям может не хватать того факта, что, хотя существуют варианты инкапсуляции, глобальные стили выводятся в тегах стилей и могут каскадно использоваться в вашем проекте.

Вот мои настройки:

1. Мои глобальные стили: styles.scss выводится в тегах стилей.Правила предназначаются для всех соответствующих классов и элементов, как и ожидалось.Даже внутри компонентов.

2. Стили компонентов инкапсулированы.Это их ценность опора.Они перезаписывают глобальные переменные и сохраняют специфичные для компонента стили с семейством компонентов.

3. @includes, такие как variables.scss, mixins.scss и т. Д., Явно указаны в верхней части любого компонента.scss файлы при необходимости.

@import '../../../../scss/includes/variables';

Что еще нам нужно?

Answer 4

запустите ng init для проекта, чтобы он инициализировал проект как угловой проект

Edit: мой плохой, кажется, они удалили init из cli, вы можете попробовать ng new --src

Может перезаписать файлы, поэтому попробуйте скопировать проект