Blueprintjs：SassError：（路径：（填充：#5c7080））不是有效的 CSS 值

Question

我正在尝试开发blueprintjs自定义主题。

\n

在我的 main.scss 中，导入 blueprintjs scss 文件，例如：

\n

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

\n

然后报错：

\n

[ 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)\nSassError: (path: (fill: #5c7080)) isn\'t a valid CSS value.\n   \xe2\x95\xb7\n39 \xe2\x94\x82       background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));\n   \xe2\x94\x82                                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n   \xe2\x95\xb5\n  node_modules/@blueprintjs/core/src/components/breadcrumbs/_breadcrumbs.scss 39:54  @import\n  node_modules/@blueprintjs/core/src/components/_index.scss 5:9                      @import\n  node_modules/@blueprintjs/core/src/blueprint.scss 16:9                             @import\n  /home/joy/Projects/pentius/pentius-website/public/styles/overwrite.scss 4:9                                                                          root stylesheet\n

\n

哪里不对了？

\n

Answer 1

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',
      }
    ),
  },
},

}