переопределение npm s css пакетов по умолчанию в моем angular приложении - PullRequest
Новая
       25

переопределение npm s css пакетов по умолчанию в моем angular приложении

0 голосов
/ 04 августа 2020

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

Это довольно просто, в нем есть файл для настройки всех семейств шрифтов, а затем я создал набор миксинов: 

    @import '~bootstrap/scss/functions';
    @import '~bootstrap/scss/variables';
    @import '~bootstrap/scss/mixins/_breakpoints';

    @mixin bodyLight() {
        font-family: 'SituLiveLight';
    }

    @mixin bodyBold() {
        font-family: 'SituLiveBold';
    }

    @mixin titleLight() {
        font-family: 'EuclidTriangleLight';
    }

    @mixin titleLightItalic() {
        font-family: 'EuclidTriangleLightItalic';
    }

    @mixin titleSemiBold() {
        font-family: 'EuclidTriangleSemiBold';
    }

    @mixin titleSemiBoldItalic() {
        font-family: 'EuclidTriangleSemiBoldItalic';
    }

    @mixin body {
        @include bodyLight;
        @include fontSize($font-sizes);
    }

    @mixin headerOne() {
        @include titleSemiBold;
        @include fontSize($h1-sizes);

        margin-top: 0;
        margin-bottom: 0;
    }

    @mixin headerTwo() {
        @include titleSemiBold;
        @include fontSize($h2-sizes);

        margin-top: 0;
        margin-bottom: $margin-lg;
    }

    @mixin headerThree {
        @include titleSemiBold;
        @include fontSize($h3-sizes);

        margin-top: 0;
        margin-bottom: $margin-lg;
    }

    @mixin headerFour {
        @include titleSemiBold;
        @include fontSize($h4-sizes);

        margin-top: 0;
        margin-bottom: $margin-lg;
    }

    @mixin headerFive {
        @include bodyBold;
        @include fontSize($h5-sizes);

        margin-top: 0;
        margin-bottom: $margin-lg;
    }

    @mixin headerSix {
        @include titleSemiBold;
        @include fontSize($h6-sizes);

        margin-top: 0;
        margin-bottom: $margin-lg;
    }

    @mixin fontSize($sizes) {
        font-size: map-get($sizes, xs);

        @include media-breakpoint-up(xs) {
            font-size: map-get($sizes, xs);
        }

        @include media-breakpoint-up(sm) {
            font-size: map-get($sizes, sm);
        }

        @include media-breakpoint-up(md) {
            font-size: map-get($sizes, md);
        }

        @include media-breakpoint-up(lg) {
            font-size: map-get($sizes, lg);
        }

        @include media-breakpoint-up(xl) {
            font-size: map-get($sizes, xl);
        }
    }

    @mixin makeGradientText($percent) {
        background: linear-gradient(to left, $jade $percent, $bright-blue);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

Размеры в настоящее время находятся в файле переменных и выглядят следующим образом: 

$h1-sizes: (xs: 36px,
  sm: 36px,
  md: 90px,
  lg: 110px,
  xl: 110px,
) !default;
$h2-sizes: (xs: 28px,
  sm: 28px,
  md: 28px,
  lg: 40px,
  xl: 44px,
) !default;
$h3-sizes: (xs: 32px,
  sm: 32px,
  md: 32px,
  lg: 96px,
  xl: 96px,
) !default;
$h4-sizes: (xs: 32px,
  sm: 32px,
  md: 32px,
  lg: 55px,
  xl: 55px,
) !default;
$h5-sizes: (xs: 18px,
  sm: 18px,
  md: 18px,
  lg: 28px,
  xl: 36px,
) !default;
$h6-sizes: (xs: 24px,
  sm: 24px,
  md: 16px,
  lg: 20px,
  xl: 24px,
) !default;
$font-sizes: (xs: 16px,
  sm: 16px,
  md: 16px,
  lg: 18px,
  xl: 18px,
) !default;
$small-sizes: (xs: 14px,
  sm: 14px,
  md: 12px,
  lg: 14px,
  xl: 14px,
) !default;
$button-sizes: $font-sizes !default;

Я хотел бы иметь возможность переопределить эти переменные в любом конкретном проекте, чтобы, когда Я вызываю миксин вроде @include fontSize($h1-sizes), он использует переопределенный размер вместо тех, что определены выше.

Я пробовал это несколькими способами. Один из способов, который я пробовал, заключался в создании такого стиля переопределения: 

$situ-font-path: '~@situlive/situ-fonts/fonts';
$h1-sizes: (xs: 80px,
  sm: 80px,
  md: 80px,
  lg: 80px,
  xl: 80px,
);
$h2-sizes: (xs: 60px,
  sm: 60px,
  md: 60px,
  lg: 60px,
  xl: 60px,
);
$h3-sizes: (xs: 45px,
  sm: 45px,
  md: 45px,
  lg: 45px,
  xl: 45px,
);
$h4-sizes: (xs: 40px,
  sm: 40px,
  md: 40px,
  lg: 40px,
  xl: 40px,
);
$h5-sizes: (xs: 30px,
  sm: 30px,
  md: 30px,
  lg: 30px,
  xl: 30px,
);
$h6-sizes: (xs: 24px,
  sm: 24px,
  md: 24px,
  lg: 24px,
  xl: 24px,
);
$font-sizes: (xs: 16px,
  sm: 16px,
  md: 16px,
  lg: 18px,
  xl: 18px,
) !default;
$small-sizes: (xs: 14px,
  sm: 14px,
  md: 12px,
  lg: 14px,
  xl: 14px,
) !default;
$button-sizes: $font-sizes !default;

А затем добавление его в мой styles.s css вот так: 

@import "./sass/variables/overrides";
@import "~@situlive/situ-fonts/sass/situ-fonts";

$situ-font-path определенно переоценивается, но размеры - нет. Они используют значения по умолчанию в пакете.

Кто-нибудь знает, как я могу их переопределить, чтобы они использовали мои переопределенные значения, а также, если я вызываю миксин из моего проекта, он также использует мои переопределенные значения?

1 Ответ

0 голосов
/ 04 августа 2020

Попробуйте переместить свой импорт из файла style.s css в свои файлы situ-fonts 

    @import '~bootstrap/scss/functions';
    @import '~bootstrap/scss/variables';
    @import '~bootstrap/scss/mixins/_breakpoints';
    @import "./sass/variables/overrides";

Убедитесь, что вы импортируете только один файл в свой style.s css file: 

@import "~@situlive/situ-fonts/sass/situ-fonts";
...