sass - Blueprintjs: SassError: (path: (fill: #5c7080)) 不是有效的 CSS 值
问题描述
我正在尝试开发一个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',
}
),
},
},
}
推荐阅读
- stored-procedures - 甚至可以在 Netezza 存储过程的主体中调用 SHOW/DROP/ALTER/CALL 语句吗?
- c# - TextBlock在wpf C#中的图像内的特定坐标中设置
- ios - 如何用字符串的 NSRegularExpression 选项替换组的出现?
- openstack - 错误:实例 c1192e0a-e815-4f4e-b995-05d0c6bd2dfc 的构建中止:分配网络失败,未重新安排?
- firebase - 从flutter中的所有firebase文档中获取数据
- reactjs - 即使表格被数据填充,Ant Design 表格也会继续显示加载
- wso2 - WSO2 - FIX 协议 - 向 FIX 网关发送请求
- apache-kafka - 卡夫卡分区为空
- django - 使用 django-elasticsearch-dsl 在 NestedField 上搜索
- swift - 带有可选默认参数的 SwiftUI 视图