Nuxt引入@nuxtjs/color-mode报SassError:$color必须为颜色类型如何修复

问题原因 #

你遇到的报错本质是Sass预编译阶段的类型不匹配：你将$primary直接赋值为var(--primary-color)这一CSS原生变量，CSS变量只有浏览器运行时才会解析实际值，Sass预编译时只会将它识别为普通字符串，无法判定为颜色类型，因此调用findcolorinvert、Bulma内部的lightness等需要接收颜色参数的Sass函数时就会抛出错误。

修复方案 #

调整变量定义逻辑，先在Sass层完成所有颜色计算保证编译通过，再通过CSS变量实现亮暗模式切换：

// Import Bulma's core
@import '~bulma/sass/utilities/_all';

// 1. 预定义亮暗模式下的色值，提前在Sass层完成颜色函数计算
$primary-light-color: #0075f2;
$primary-light-invert: findcolorinvert($primary-light-color);
$primary-dark-color: #0015f2;
$primary-dark-invert: findcolorinvert($primary-dark-color);

// 2. 给Bulma的Sass变量赋静态默认值（用亮模式值即可），保证编译通过
$primary: $primary-light-color;
$primary-invert: $primary-light-invert;

// 其余静态色值保持原有逻辑即可
$white: #fdfffc;
$black: #272932;
$link: #004ba8;
$link-invert: findcolorinvert($link);
$info: #00b4d8;
$info-invert: findcolorinvert($info);
$success: #4cb944;
$success-invert: findcolorinvert($success);
$warning: #ffba08;
$warning-invert: findcolorinvert($warning);
$danger: #f06543;
$danger-invert: findcolorinvert($danger);
$facebook: #3b5998;
$facebook-invert: findcolorinvert($facebook);
$twitter: #4099ff;
$twitter-invert: findcolorinvert($twitter);
$google: #dd4b39;
$google-invert: findcolorinvert($google);
$github: #333;
$github-invert: findcolorinvert($github);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  'white': (
    $white,
    $black,
  ),
  'black': (
    $black,
    $white,
  ),
  'light': (
    $light,
    $light-invert,
  ),
  'dark': (
    $dark,
    $dark-invert,
  ),
  'primary': (
    $primary,
    $primary-invert,
  ),
  'info': (
    $info,
    $info-invert,
  ),
  'success': (
    $success,
    $success-invert,
  ),
  'warning': (
    $warning,
    $warning-invert,
  ),
  'danger': (
    $danger,
    $danger-invert,
  ),
  'facebook': (
    $facebook,
    $facebook-invert,
  ),
  'twitter': (
    $twitter,
    $twitter-invert,
  ),
  'google': (
    $google,
    $google-invert,
  ),
  'github': (
    $github,
    $github-invert,
  ),
);

$navbar-height: 3.5rem;
$pagination-margin: 0;

// 3. 最后定义亮暗模式的CSS变量，覆盖Bulma的生效样式
// 如果你用的是Bulma 0.9+版本，直接覆盖官方内置的--bulma-前缀变量即可
html {
  &.light-mode {
    --bulma-primary: #{$primary-light-color};
    --bulma-primary-invert: #{$primary-light-invert};
    // 其余需要切换的色值可按同样规则扩展
  }
  &.dark-mode {
    --bulma-primary: #{$primary-dark-color};
    --bulma-primary-invert: #{$primary-dark-invert};
    // 其余需要切换的色值可按同样规则扩展
  }
}

额外注意 #

确认你的nuxt.config中@nuxtjs/color-mode的配置和你使用的类名匹配，示例配置参考：

export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    classSuffix: '-mode' // 保证生成的类名是light-mode、dark-mode和你的代码匹配
  }
})

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