gpt4 book ai didi

sass - Blueprintjs: SassError: (path: (fill: #5c7080)) 不是有效的 CSS 值

转载 作者:行者123 更新时间:2023-12-03 23:06:19 27 4
gpt4 key购买 nike

我正在尝试开发一个 blueprintjs自定义主题。
在我的 main.scss 中,导入 blueprintjs scss 文件,例如:

@import "~@blueprintjs/core/lib/scss/variables.scss";
$pt-intent-primary: #110630;

@import "~@blueprintjs/core/src/blueprint.scss";
然后报错:
[ error ] ./public/styles/overwrite.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./public/styles/overwrite.scss)
SassError: (path: (fill: #5c7080)) isn't a valid CSS value.

39 │ background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

node_modules/@blueprintjs/core/src/components/breadcrumbs/_breadcrumbs.scss 39:54 @import
node_modules/@blueprintjs/core/src/components/_index.scss 5:9 @import
node_modules/@blueprintjs/core/src/blueprint.scss 16:9 @import
/home/joy/Projects/pentius/pentius-website/public/styles/overwrite.scss 4:9 root stylesheet
哪里不对了?

最佳答案

Blueprintjs 使用依赖于 node-sass 的 sass-inline-svg,但 Next 使用 sass 而不是 node-sass,我发现 @vgrid/sass-inline-svg 是一个带有 sass 的端口。为此,接下来您将需要资源/图标文件夹的路径
使用以下内容创建 next.config.js 文件:

const inliner = require('@vgrid/sass-inline-svg');
const path = require('path');
module.exports = {
sassOptions: {
functions: {
/**
* Sass function to inline a UI icon svg and change its path color.
*
* Usage:
* svg-icon("16px/icon-name.svg", (path: (fill: $color)) )
*/

'svg-icon($path, $selectors: null)': inliner(
path.join(__dirname, 'path-to-resources/icons'),
{
// run through SVGO first
optimize: true,
// minimal "uri" encoding is smaller than base64
encodingFormat: 'uri',
}
),
},
},
}

关于sass - Blueprintjs: SassError: (path: (fill: #5c7080)) 不是有效的 CSS 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62494045/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com