Nuxt color-mode SassError: `lightness($color)` 的参数`$color` 必须是颜色

Question

我的 Nuxt SSR 项目使用 Bulma/Buefy，我正在尝试使用 @nuxtjs/color-mode 模块

这是我的 vars.scss 文件，我在其中定义了 light-mode 和 dark-mode 类

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

$primary-light-color: #0075f2;
$primary-dark-color: #0015f2;
html {
  &.light-mode {
    --primary-color: #{$primary-light-color};
  }
  &.dark-mode {
    --primary-color: #{$primary-dark-color};
  }
}
// Set your colors
$white: #fdfffc;
$black: #272932;
$primary: var(--primary-color);
$primary-invert: findcolorinvert($primary);
$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;
// https://bulma.io/documentation/components/pagination/#variables
// Removed to make the pagination at the bottom of any table appear without vertical scrollbar
$pagination-margin: 0;

它给了我以下错误

ERROR in ./assets/app.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./assets/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: argument `$color` of `lightness($color)` must be a color
        on line 58 of node_modules/bulma/sass/components/message.sass, in function `lightness`
        from line 58 of node_modules/bulma/sass/components/message.sass
        from line 10 of node_modules/bulma/sass/components/_all.sass
        from line 7 of node_modules/bulma/bulma.sass
        from line 101 of assets/app.scss
>>       $color-lightning: max((100% - lightness($color)) - 2%, 0%);

   ------------------------------------^

这是我到 CodeSandbox 的链接，有人可以告诉我如何解决这个问题吗？

Answer 1

您传递的是 var() ($primary: var(--primary-color);) 而不是颜色（HEX、HSL、RGB 等）。