How to import style files into an Angular +2 project in an optimized way?

Question

Im working with Angular Material theme into an Angular 6 project, I have 3 style files:

1) styles.scss (main style file, it's define into Angular.json file)

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

2) blue-light.scss (style with the angular material definition colors)

@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 (file when I using the main colors of the palette in my custom components)

// 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);
    }
}

For the moment the code works, but I want developt in a optimized way, I read in the following Material article, that the custom theme files should not be imported into other SCSS files. This will duplicate styles in your CSS output. If you want to consume your theme definition object (e.g., $custom-theme in my case) in other SCSS files, then the definition of the theme object should be broken into its own file, separate from the inclusion of the mat-core and angular-material-theme mixins.

I can not understand what this means and how it should be implemented, I need a guide for create custom themes and how efficiently import style files

Answer 1

in general it's fine to import uncompressed style files, as webpack (or whatever bundler you are using) will automatically minify and uglify all style files for you.

about customising material, please refer to this part of the angular material documentation: https://material.angular.io/guide/theming#defining-a-custom-theme

there it says that you only need one since SCSS file to customize material with this content

@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);