Angular 6 Библиотечные компоненты и SCSS - PullRequest
Новая
       25

Angular 6 Библиотечные компоненты и SCSS

0 голосов
/ 12 сентября 2018

Я строил библиотеку Angular 6. Новый процесс довольно приятный.

Я беру некоторые модули и их компоненты, которые были написаны в предыдущей версии, и конвертирую их. Эти компоненты были оформлены так, что их вид и стили являются внешними файлами, html и scss соответственно.

Библиотека, над которой я работаю, также содержит глобальные стили, которые выводятся в папку библиотеки с использованием scss-bundler в процессе сборки. Эти стили не включают в себя ни один из стилей компонента.

Я использовал «базовое» приложение Angular в качестве демонстрационного сайта для компонентов. Опять же, очень приятно, что я могу использовать один репозиторий для создания своей библиотеки и ее демонстрации.

В приложении я импортирую мои глобальные стили из каталога dist библиотеки: 

/* VARIABLES */
@import "../dist/vdl-lib/variables";

/* BOOTSTRAP */
@import "../node_modules/bootstrap/scss/bootstrap";

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

/* VDL-LIB */
@import "../dist/vdl-lib/styles";

/* DEMO APPLICATION STYLES */
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";

html, body {
  height: 100%;
}

Это прекрасно работает, и на данный момент мои компоненты стилизованы правильно и применены глобальные стили макета.

Теперь вот где я сталкиваюсь с проблемой. Причина SCSS в том, чтобы иметь возможность настраивать, верно? В моем компоненте заголовка (расположенном в библиотеке) у меня есть некоторые стили для логотипа: 

.header-logo {
  display: flex;
  align-items: center;
  .name-brand {
    padding-right: $padding-base;
    img {
      height: $logo-height;
    }
  }
}

В styles.scss (показанном выше) предположим, что я вставил переменное переназначение $logo-height: 68px непосредственно перед @import "../dist/vdl-lib/styles";. При запуске приложения размер логотипа компонента не изменяется. Я вижу, что высота установлена ​​равной исходному значению в моем внутреннем scss-файле «переменных».

Это проблема замещения в SCSS или Angular? Это не так! Из того, что я могу сказать, когда библиотека построена, стиль выходного компонента скомпилирован в CSS !

Я пришел к такому выводу, посмотрев в вывод fsm5 js. Я могу найти декораторы для компонента и убедиться, что это CSS.

Я попытался использовать styles вместо styleUrls на компонентном декораторе. Я удалил импорт для моих «переменных» scss файлов. Это заставило выходной JavaScript иметь SCSS, но запуск демонстрационного приложения показал, что ни один из стилей компонента не применялся. Я не уверен, есть ли какая-то проблема с упорядочением, которая не позволяет переменным, импортированным в демонстрационном приложении styles.scss, использоваться в компонентах. Я еще не пробовал определять переменные в angular.json, но у меня нет особой надежды на это.

Итак, у меня такой вопрос: возможно ли заставить библиотечные компоненты использовать и выводить SCSS, чтобы приложение-потребитель могло настраивать любые переменные макета? Мне не хватает некоторых параметров конфигурации, чтобы сообщить Angular о создании демонстрационного приложения с предположением, что стили в используемой библиотеке являются scss и их необходимо скомпилировать?

1 Ответ

0 голосов
/ 31 января 2019

Убедитесь, что ваше свойство styleUrls указывает на локальный файл в библиотеке, например: 

@Component({

    selector: 'ngxux-mat-login',

    template: `

       ..html stuff snip snip..
    `,

    styleUrls: [ './mycomponent.component.scss' ]

})

my scss: 

:host {

    .wrapper {

        form {

            display: flex;
            align-items: center;
            justify-content: space-between;

            mat-form-field {

                margin: 10px;

            }

            .description {

                flex: 1;
                margin-right: 25px;

            }

        }

    }

}

Так что это должно решить одну из ваших проблем.Ваша последняя проблема относительно «наследования» переменных из библиотеки не будет работать.Вам нужно будет создать каталог глобального типа и создать символические ссылки на него.Компилятор не имеет представления об этом (tbd).

Если вам нужны примеры с использованием библиотек, не стесняйтесь проверить мои использования на https://github.com/mateothegreat/ngxux/tree/master/projects.

...