Blueprintjs:SassError:(路径:(fill:#5c7080))不是';不是有效的CSS值
我正在尝试开发一个自定义主题 在my main.scss中,导入blueprintjs scss文件,如:Blueprintjs:SassError:(路径:(fill:#5c7080))不是';不是有效的CSS值,sass,next.js,blueprintjs,Sass,Next.js,Blueprintjs,我正在尝试开发一个自定义主题 在my 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.
@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
有什么问题吗?附加的
路径无效,您能试试吗
i、 e
background:svg图标(“16px/chevron right.svg”)
尝试删除“sass”包并将其替换为“node sass”:
纱线移除sass和纱线添加-D节点sass
并在网页包配置中切换加载程序:
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('node-sass')
}
}
]
},
Blueprintjs使用依赖于节点sass的sass内联svg,但是接下来使用sass而不是节点sass,我发现@vgrid/sass内联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',
}
),
},
},
}您是否尝试过在节点模块下的包/图标中编译/blueprint@Ramakey,它可能会工作,但不应该在节点模块中工作。如果是的话,需要破解它的网页。