Blueprintjs: SassError: (path: (fill: #5c7080)) isn't a valid CSS value

Question

I am trying to develop a blueprintjs custom theme.

In my main.scss, import blueprintjs scss files like:

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

@import "~@blueprintjs/core/src/blueprint.scss";

Then error:

[ 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

Anything wrong?

Northway

Answer 1

Blueprintjs uses sass-inline-svg which relies on node-sass, but Next uses sass instead of node-sass, I found @vgrid/sass-inline-svg which is a port with sass. For this to work with next you will need the path to the resources/icons folder

Create a next.config.js file with the following:

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

}

Barrister

Answer 2

This is an open issue with Blueprint.js. None of the above solutions currently work with Node 16, or any permutation of sass parsers.

https://github.com/palantir/blueprint/issues/4032

Alkalinize

Answer 3

Try removing the "sass" package and replacing it with "node-sass":

yarn remove sass && yarn add -D node-sass

and switching the loader in your webpack config:

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

Adigun

I am using nextjs. If so, need to hack its webpack. – Northway

node-sass is deprecated now – Corticosterone

Answer 4

The additional path is invalid, can you try that ?

i.e background: svg-icon("16px/chevron-right.svg")

Quade

Have you tried yarn compile in packages/icons of under node_modules/blueprint – Quade

@Ramakey, it may work, but should not do it in node_modules. – Northway

Answer 5

This is fixed now with Blueprint's migration to dart-sass. You should be able to import blueprint.scss, override its Sass variables, and compile with the "sass" library (dart-sass) if you are using @blueprintjs/core >= v4.1.0.

Lazy