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

Question

Я строил библиотеку 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!

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

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

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

Answer 1

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

@Component({

    selector: 'ngxux-mat-login',

    template: `

       ..html stuff snip snip..
    `,

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

})

мой 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.