Question

错误，功能请求或提案：

我为材料设计创建了一个主题但是当我构建时我有错误。我的代码是这样的：

theme-variables.scss

// Theme contrast color
$dark: $black-87-opacity;
$light: $white-87-opacity;
$strong-light: rgb(255, 255, 255);

// Theme color map
$theme-blue: (
  50: #ebf1fa,
  100: #c2d4ef,
  200: #9ab8e5,
  300: #78a0dc,
  400: #5688d3,
  500: #3470ca,
  600: #2e62b1,
  700: #275498,
  800: #21467e,
  900: #1a3865,
  A100: #c2d4ef,
  A200: #9ab8e5,
  A400: #5688d3,
  A700: #275498,
  contrast: (
    50: $dark,
    100: $dark,
    200: $dark,
    300: $strong-light,
    400: $strong-light,
    500: $light, // default
    600: $light, // default
    700: $light, // default
    800: $light, // default
    900: $light, // default
    A100: $dark,
    A200: $light, // default
    A400: $light, // default
    A700: $light // default
));

$theme-paleblue: (
  50: #ececee,
  100: #c5c6cb,
  200: #9ea1a9,
  300: #7d818c,
  400: #5c616f,
  500: #3c4252,
  600: #353a48,
  700: #2d323e,
  800: #262933,
  900: #1e2129,
  A100: #c5c6cb,
  A200: #9ea1a9,
  A400: #5c616f,
  A700: #2d323e,
  contrast: (
    50: $dark,
    100: $dark,
    200: $dark,
    300: $strong-light,
    400: $strong-light,
    500: $light, // default
    600: $light, // default
    700: $light, // default
    800: $light, // default
    900: $light, // default
    A100: $dark,
    A200: $light, // default
    A400: $light, // default
    A700: $light // default
));

// ------------------------------------------------------------------------------------------------
// Custom Material theme variables
// ------------------------------------------------------------------------------------------------
@include mat-core();


// ------------------------------------------------------------------------------------------------
// Default Theme
// ------------------------------------------------------------------------------------------------

// Background palettes
$mat-light-theme-background: (
  status-bar: map_get($mat-grey, A100),
  app-bar:    map_get($mat-grey, A100),
  background: map_get($mat-grey, 100),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, A100),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
);

// Define default color palettes
$default-primary: mat-palette($theme-paleblue, 700, 500, 600);
$default-accent: mat-palette($mat-light-blue, 600, 400, 700);
$default-warn: mat-palette($mat-red);

// Create default theme object
$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

theme.scss

@include angular-material-theme($default-theme);
@include splash-theme($default-theme);

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/main.scss Module build failed: undefined ^ (50: #ececee, 100: #c5c6cb, 200: #9ea1a9, 300: #7d818c, 400: #5c616f, 500: #3c4252, 600: #353a48, 700: #2d323e, 800: #262933, 900: #1e2129, A100: #c5c6cb, A200: #9ea1a9, A400: #5c616f, A700: #2d323e, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: rgba(255, 255, 255, 0.87), 600: rgba(255, 255, 255, 0.87), 700: rgba(255, 255, 255, 0.87), 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: rgba(255, 255, 255, 0.87), A400: rgba(255, 255, 255, 0.87), A700: rgba(255, 255, 255, 0.87)), default: #2d323e, lighter: #3c4252, darker: #353a48, default-contrast: rgba(255, 255, 255, 0.87), lighter-contrast: rgba(255, 255, 255, 0.87), darker-contrast: rgba(255, 255, 255, 0.87), "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": rgba(255, 255, 255, 0.87), "600-contrast": rgba(255, 255, 255, 0.87), "700-contrast": rgba(255, 255, 255, 0.87), "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(255, 255, 255, 0.87), "A400-contrast": rgba(255, 255, 255, 0.87), "A700-contrast": rgba(255, 255, 255, 0.87), "contrast-contrast": null) isn't a valid CSS value. in C:\Devlab\node-apps\angular-x-express-starter-kit\node_modules\@angular\material\_theming.scss (line 1072, column 14) @ ./src/main.scss 4:14-187 @ multi ./src/main.scss

node-sass -v

目前的行为是什么？

我收到此错误：

4.5.2

这是我的环境：/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ @angular/cli: 1.0.3 node: 6.10.3 os: win32 x64 @angular/animations: 4.1.2 @angular/common: 4.1.2 @angular/compiler: 4.1.2 @angular/core: 4.1.2 @angular/flex-layout: 2.0.0-beta.8 @angular/forms: 4.1.2 @angular/http: 4.1.2 @angular/material: 2.0.0-beta.5 @angular/platform-browser: 4.1.2 @angular/platform-browser-dynamic: 4.1.2 @angular/router: 4.1.2 @angular/cli: 1.0.3 @angular/compiler-cli: 4.1.2结果为<ul class="nav navbar-nav navbar-right"> <li class="nav-item"> <%= link_to "Entry", entry_path, class: 'nav-link', 'data-turbolinks' => false %> </li> <li class="nav-item"> <%= link_to "Entry 2", entry2_path, class: 'nav-link', 'data-turbolinks' => false %> </li> <li class="nav-item localization-links"> <% unless I18n.locale == :en %> <div class="unactive-localization-button"> <%= link_to "EN", locale: :en %> </div> <% else %> <a class: 'nav-link'>EN</a> <% end %> </li> <li class="nav-item localization-links"> <% unless I18n.locale == :fr %> <%= link_to "FR", locale: :fr %> <% else %> <a class: 'nav-link'>FR</a> <% end %> </li> </ul>

$(".nav li").click(function() {
    if ($(".nav li").hasClass("active")) {
       $(this).removeClass("active");
    } else {
       $(this).addClass("active");
    }
});

还有其他什么我们需要知道的么？

Answer 1

theme-variables.scss 使用了 Angular Material：mat-palette、mat-light-theme 等

为了使这些可用，您需要将此导入添加到 theme-variables.scss 的顶部：

@import "~@angular/material/theming";

undefined ...不是有效的CSS值

1 个答案: