Angular 5 Material Custom Theme на бесконечной петле

Question

Я впервые пытаюсь создать собственную тему материала. Поискав в интернете, мне еще предстоит выяснить, почему я получаю эту ошибку-

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/aviation.scss
Module build failed: 
@import '../node_modules/@angular/material/theming';
^
      An @import loop has been found:
    stdin imports /Users/jbyron/Desktop/gdpr/node_modules/@angular/material/_theming.scss
    /Users/jbyron/Desktop/gdpr/node_modules/@angular/material/_theming.scss imports src/aviation.scss
    src/aviation.scss imports /Users/jbyron/Desktop/gdpr/node_modules/@angular/material/_theming.scss
      in /Users/jbyron/Desktop/gdpr/src/aviation.scss (line 1, column 1)

webpack: Failed to compile.

Из того, что я могу понять об этой ошибке, это какой-то бесконечный цикл, но я не уверен, где он зацикливается. В моей пользовательской теме у меня есть следующее -

@import '../node_modules/@angular/material/theming';
@include mat-core();

$my-primary: (
  '50': 'e5e7e9',
  '100': 'bec3c8',
  '200': '939ba3',
  '300': '67737e',
  '400': '475562',
  '500': '263746',
  '600': '22313f',
  '700': '1c2a37',
  '800': '17232f',
  '900': '0d1620',
  'A100': '61a5ff',
  'A200': '2e87ff',
  'A400': '006bfa',
  'A700': '0060e0',
  'contrastDefaultColor': 'light',
  'contrastDarkColors': [
    '50',
    '100',
    '200',
    'A100'
  ],
  'contrastLightColors': [
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '900',
    'A200',
    'A400',
    'A700'
  ]
);

$my-accent: (
  '50': 'e0f3fb',
  '100': 'b3e1f5',
  '200': '80cdef',
  '300': '4db9e8',
  '400': '26aae3',
  '500': '009bde',
  '600': '0093da',
  '700': '0089d5',
  '800': '007fd1',
  '900': '006dc8',
  'A100': 'f1f8ff',
  'A200': 'beddff',
  'A400': '8bc3ff',
  'A700': '71b6ff',
  'contrastDefaultColor': 'light',
  'contrastDarkColors': [
    '50',
    '100',
    '200',
    '300',
    '400',
    'A100',
    'A200',
    'A400',
    'A700'
  ],
  'contrastLightColors': [
    '500',
    '600',
    '700',
    '800',
    '900'
  ]
);

$my-warn: (
  '50': 'fde0e5',
  '100': 'f9b3bf',
  '200': 'f58094',
  '300': 'f14d69',
  '400': 'ee2649',
  '500': 'eb0029',
  '600': 'e90024',
  '700': 'e5001f',
  '800': 'e20019',
  '900': 'dd000f',
  'A100': 'ffffff',
  'A200': 'ffd1d2',
  'A400': 'ff9ea1',
  'A700': 'ff8588',
  'contrastDefaultColor': 'light',
  'contrastDarkColors': [
    '50',
    '100',
    '200',
    '300',
    'A100',
    'A200',
    'A400',
    'A700'
  ],
  'contrastLightColors': [
    '400',
    '500',
    '600',
    '700',
    '800',
    '900'
  ]
);

$my-theme-primary: mat-palette($my-primary);
$my-theme-accent:  mat-palette($my-accent);
$my-theme-warn:    mat-palette($my-warn);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

@include angular-material-theme($my-theme);

и я включил путь к своей пользовательской теме в _themeing.scss

@import "./src/aviation.scss";

Кто-нибудь понимает проблему цикла @import?

Answer 1

Похоже, вы импортируете слишком много.Единственный импорт, который вам действительно нужен, это:

@import '../../node_modules/@angular/material/_theming.scss';

Я также не уверен насчет массивов, если первый шаг не решит проблему, попробуйте использовать что-то вроде

contrast: (
  50: $black-87-opacity,
  100: $black-87-opacity,
  ...
)

вместо

'contrastDarkColors': [
  '50',
  '100',
  ...
]

Вот реальный пример из моего приложения (я помещу его во фрагмент, чтобы не спамить пространство):

@import '../../node_modules/@angular/material/_theming.scss';

$custom-light-blue: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #4fc3f7,
  400: #29b6f6,
  500: #3c3fcb,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  A100: #80d8ff,
  A200: #40c4ff,
  A400: #00b0ff,
  A700: #0091ea,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: white,
  )
);

$custom-white: (
  50: white,
  100: white,
  200: white,
  300: white,
  400: white,
  500: white,
  600: white,
  700: white,
  800: white,
  900: white,
  A100: white,
  A200: white,
  A400: white,
  A700: white,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);

// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@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.
$candy-app-primary: mat-palette($custom-light-blue);
$candy-app-accent:  mat-palette($custom-white);
$accent:  mat-palette($custom-white);

// 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, $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);