sass - Nuxt color-mode SassError: `lightness($color)` 的参数`$color` 必须是颜色
问题描述
我的 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的链接有人可以告诉我如何解决这个问题吗?
解决方案
您传递的是var()
( $primary: var(--primary-color);
) 而不是颜色(HEX、HSL、RGB 等)。
推荐阅读
- haskell - Haskell 不能压缩字符串然后与列表理解结合
- scikit-learn - Auto-sklearn 平均绝对误差度量没有结果
- sql - 在任何一周内让员工在 2 个或更多市场获得发票
- cloudinary - 获取 Cloudinary 未签名上传的上传进度
- angular - 对同一个数组使用多个 ngFor
- php - 嵌套 for 循环将 JSON 插入 php 中 SQL 表的同一行
- javascript - Error 对象是否具有文字语法?
- java - 如何使用 ListObjectsV2Request 上的前缀或分隔符过滤 AWS 中的键?
- angular - 角度 4 中字节数组的文档查看器(doc 或 docx)
- go - 带有自定义 css 的 Golang FileServer