Угловые 6 разделов стилей библиотеки

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

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

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

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

ОБНОВЛЕНИЕ: мой проект был инициирован с использованием углового 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

Ответ 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. Для этого отредактируйте файл проекта angular библиотеки 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 Временные решения не самые элегантные решения, но когда ничего не работает, они обходятся!

Ответ 2

Запустите ng init для проекта, чтобы он инициализировал проект как проект Angular CLI.

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

Это может перезаписать некоторые файлы, поэтому попробуйте сделать это на копии проекта.

Ответ 3

Пробовали ли вы установить уровень инкапсуляции компонента в none как часть метаданных компонента? Как это:

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

Уровни ViewEncapsulation:

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

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

Ответ 4

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

Вот моя установка:

Мои глобальные стили: styles.scss выводится в тегах стилей. Правила предназначаются для всех соответствующих классов и элементов, как и ожидалось. Даже внутри компонентов.
Стили компонентов инкапсулированы. Это их ценность опора. Они перезаписывают глобальные переменные и сохраняют специфичные для компонента стили вместе с семейством компонентов.
@includes такие как variables.scss, mixins.scss и т.д., включаются явно в начало любого компонента .scss файлов, когда это необходимо.

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

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