next.js Blueprintjs：SassError：(path：(fill：#5c7080))不是有效的CSS值

68de4m5k 于 2023-04-20 发布在其他

关注(0)|答案(5)|浏览(98)

我正在尝试开发一个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

出什么事了吗

next.js

来源：https://stackoverflow.com/questions/62494045/blueprintjs-sasserror-path-fill-5c7080-isnt-a-valid-css-value

5条答案

按热度按时间

wxclj1h51#

Blueprintjs使用sass-inline-svg，它依赖于node-sass，但是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',
      }
    ),
  },
},

}

赞(0）回复(0）举报 2023-04-20

uurity8g2#

这是Blueprint.js的一个公开问题。上述解决方案目前都不适用于Node 16或任何sass解析器的排列。
https://github.com/palantir/blueprint/issues/4032

赞(0）回复(0）举报 2023-04-20

idv4meu83#

尝试删除“sass”包并将其替换为“node-sass”：
yarn remove sass && yarn add -D node-sass
并在webpack配置中切换加载器：

{
       test: /\.s[ac]ss$/i,
       use: [
         'style-loader',
         'css-loader',
         {
           loader: 'sass-loader',
           options: {
             implementation: require('node-sass')
           }
         }
       ]
     },

赞(0）回复(0）举报 2023-04-20

mqxuamgl4#

额外的path无效，你能试试吗？
即background: svg-icon("16px/chevron-right.svg")

赞(0）回复(0）举报 2023-04-20

roejwanj5#

现在Blueprint's migration to dart-sass解决了这个问题。如果你使用的是@blueprintjs/core〉= v4.1.0，你应该可以导入blueprint.scss，覆盖它的Sass变量，并使用"sass"库（dart-sass）进行编译。

赞(0）回复(0）举报 2023-04-20