自定义Materialize CSS报错：添加自定义Sass调色板未生效求助

Let's break down what might be going wrong with your custom palette setup and fix it step by step:

1. Check Color Map Definition & Import Order #

First up, Materialize's color system relies on Sass maps, and the order of your imports matters a lot. If your _variables.scss is loaded before _color.scss, the color() function won't be able to find your $my-blue map when it tries to define $my-primary-blue—that's a common source of errors.

• Double-check your $my-blue map in _color.scss (your syntax here is fine, even with just a base shade):

  $my-blue: (
    "base": #0069B1,
  );
  

• Ensure your main Sass entry file (like style.scss) imports files in this exact order:

  // First load color maps so variables can reference them
  @import "color";
  // Then load variables that depend on color maps
  @import "variables";
  // Finally load Materialize core
  @import "materialize";
  

2. Verify Your Custom Primary Color Variable #

Your $my-primary-blue definition looks correct, but let's confirm it's resolving properly. Add a debug line right after the variable in _variables.scss to test during compilation:

$my-primary-blue: color("my-blue", "base") !default;
@debug $my-primary-blue; // This should output #0069B1 in your compile logs

If the debug output is missing or throws an error, your color map isn't being loaded before this variable—go back to fix the import order.

3. Fix the Button Focus Variable Modification #

You mentioned changing $button-background-focus to something with $button-raise...—make sure you're using the correct Materialize variable name. For raised buttons, the proper variable is $button-raised-background-focus. Update your line to:

$button-raised-background-focus: lighten($my-primary-blue, 4%) !default;

If you meant to override the general button focus background (not just raised ones), stick with $button-background-focus but ensure it references your valid custom color variable:

$button-background-focus: lighten($my-primary-blue, 4%) !default;

4. Compile & Debug #

After making these changes, recompile your Sass (e.g., with sass style.scss style.css) and check the output logs. If you still get errors:

• Look for "undefined variable" messages: this means either your color map isn't loaded, or you misspelled a variable name.
• Look for "map-get" errors: this indicates the color() function can't find your my-blue map (again, import order is the likely culprit).

A quick sanity check: make sure your Sass version is 3.3 or higher (Materialize requires this for map support).

内容的提问来源于stack exchange，提问作者DavidB