Question

我正在将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 article中读到，自定义主题文件不应导入到其他SCSS文件中。这将在CSS输出中复制样式。如果要在其他SCSS文件中使用主题定义对象（例如，在我的情况下为$ custom-theme），则应将主题对象的定义分解为自己的文件，并与mat-core和角材料主题混合。

我不明白这意味着什么以及应该如何实现，我需要一个指南来创建自定义主题以及如何高效导入样式文件

Answer 1

通常，导入未压缩的样式文件是可以的，因为webpack（或您正在使用的任何捆绑程序）会自动为您压缩和丑化所有样式文件。

有关自定义材质的信息，请参阅角形材质文档的这一部分：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);

如何以优化的方式将样式文件导入Angular +2项目？

1 个答案: