Question

在我进行AOT构建后，我尝试使用汇总插件进行树震动。在这期间我没有错误。

然后我使用index.html

投放build.js和lite-server

当我打开网站时，HTML根本没有呈现任何样式。 XHR请求也在工作，但没有样式。不是材料也不是我的自定义样式。

我使用自定义素材主题

在控制台我收到此警告：

无法找到Angular Material核心主题。大多数材料组件可能无法按预期工作。有关详细信息，请参阅主题指南：https://material.angular.io/guide/theming

.angular-cli.json

"styles": [
      "./src/styles/styles.scss"
    ],

src/styles/styles.scss

//
// Material init structure
//
@import '~@angular/material/theming';
@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.
$gt-app-primary: mat-palette($mat-light-blue, 900);
$gt-app-accent: mat-palette($mat-light-blue, 700);
// The warn palette is optional (defaults to red).
$gt-app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$gt-app-theme: mat-light-theme($gt-app-primary, $gt-app-accent, $gt-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($gt-app-theme);
//
// Base Structure
//
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

:focus {outline:none;}

//
// Base page general layout and styling
//
@mixin gt-tab-group-theme($theme) {
  $primary: map-get($theme, accent);
  .mat-tab-labels {
    background: mat-color($primary);
  }
  .mat-tab-label {
    flex-grow: 1;
    color: white;
  }
  .mat-ink-bar {
    background-color: white;
  }
}

.page {
  &-header-tabs {
    @include gt-tab-group-theme($gt-app-theme);
  }
  &-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem 2rem;
  }
}

//
// Basic Grid
//
.grid {
  display: flex;
  .item {
    &-grow {
      flex-grow: 1;
    }
  }
}

//
// Filter Container
//
.filter-container {
  align-items: center;
  padding: 1em 0;
  button:first-of-type {
    min-width: 135px;
  }
}

.search {
  display: flex;
  justify-content: center;
  md-icon {
    padding-top: 14px;
  }
  md-input-container {
    width: 100%;
    max-width: 350px;
  }
}

角度4树摇动与自定义材料主题

0 个答案: