Как оптимизировать импорт файлов стилей в проект Angular +2? - PullRequest
Новая
       52

Как оптимизировать импорт файлов стилей в проект Angular +2?

0 голосов
/ 19 февраля 2019

Я работаю с темой Angular Material в проекте Angular 6, у меня есть 3 файла стилей:

1) styles.scss (основной файл стилей, он определен в файле Angular.json) 

@import "styles/themes/blue-light.scss";
// Basics
* {
    margin: 0;
    padding: 0;
}
...

2) blue-light.scss (стиль с цветовыми определениями угловых материалов) 

@import '~@angular/material/theming';
@import '../custom-theme.scss';
@include mat-core();
$my-app-primary: mat-palette($mat-blue, 900);
$my-app-accent: mat-palette($mat-light-blue, 500, 900, A100);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
@include custom-theme($my-app-theme);

3) custom-theme.scss (файл, когда я использую основные цвета палитры в своем пользовательском приложениикомпоненты) 

// Import library functions for theme creation.
@import '~@angular/material/theming';

@mixin custom-theme($theme) {

    // Extract the palettes you need from the theme definition.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

    .mat-nav-list .active {
        background: mat-color($primary, 50);
        color: mat-color($primary);
    }
}

На данный момент код работает, но я хочу оптимизировать его, я прочитал в следующей статье Material , что файлы пользовательских тем не должны импортироватьсяв другие файлы SCSS.Это будет дублировать стили в вашем выводе CSS.Если вы хотите использовать свой объект определения темы (например, $ custom-theme в моем случае) в других файлах SCSS, то определение объекта темы следует разбить на его собственный файл, отдельно от включения mat-core иМиксины angular-material-theme.

Не могу понять, что это значит и как это следует реализовывать, мне нужно руководство по созданию пользовательских тем и как эффективно импортировать файлы стилей

1 Ответ

0 голосов
/ 19 февраля 2019

В общем, можно импортировать несжатые файлы стилей, так как веб-пакет (или любой используемый вами пакет) автоматически уменьшит и уменьшит все файлы стилей для вас.

о настройке материала, пожалуйста, обратитесь к этой частидокументация углового материала: https://material.angular.io/guide/theming#defining-a-custom-theme

там сказано, что вам нужен только один файл SCSS для настройки материала с этим содержанием 

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);
...