blueprint: Unable to override default styles for .scss

Environment

Package version(s): “@blueprintjs/core”: “3.45.0”
Browser and OS versions: Chrome, Linux

Question

I’m trying to override the default styles but I am running into an issue not addressed in any of the other answers to this question. I am importing "~@blueprintjs/core/src/blueprint.scss" into my react project after the variables are overwritten, but as a result it will not compile, instead sending errors such as

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
  src/styles/variables.scss 249:9                                                    @import

In my file, variables.scss I’ve overwritten each of the variables that I want individually, ie $pt-app-background-color: $red3; just to see if anything happens. The file itself is almost identical to variables.scss in the npm module.

I went through the module itself and tried to edit "~@blueprintjs/core/src/common/_color-aliases.scss" and "~@blueprintjs/core/src/common/_colors.scss" directly, but that has not worked either. I am using create-react-app with typescript.

Any help is appreciated.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 15 (9 by maintainers)

Most upvoted comments

I also struggled with this for a while, thanks for the comments, helped me find a workaround:

Downloaded the missing icons (chevron-right.svg, more.svg, small-minus.svg, small-tick.svg) from the icons folder, and put them in a folder in my repo.
Then add the custom function from ./scripts/sass-custom-functions.js in my webpack config for the sass-loader, replacing the path to the icons to where I put them in my repo.
(Also specified the sass-loader implementation to use sass and not node-sass)

// Webpack config
const path = require('path');
const sass = require('sass');
const inliner = require('@vgrid/sass-inline-svg');

...

{
  loader: 'sass-loader',
  options: {
    implementation: sass,
    sassOptions: {
      functions: {
      /**
       * Copied from node_modules\@blueprintjs\core\scripts\sass-custom-functions.js
       *
       * 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, 'blueprint-icons/icons'), // Replaced path to icons
          {
            // run through SVGO first
            optimize: true,
            // minimal "uri" encoding is smaller than base64
            encodingFormat: 'uri'
          }
        )
      }
    }
  }
}

andersHj on May 4, 2022

Migrating to dart sass and upgrading Node is the next project on my list after shipping v4.0.0 stable… I will get around to it in the next few weeks

adidahiya on Feb 24, 2022

Are you the only developer on this? We’re rebuilding our site based on BP components, and it’s crucial that we can style the components. We may have to choose another library if this one is effectively crippled.

I don’t mean to put more pressure on @adidahiya , rather I would hope there were more people working to solve this.

Edit: is there anything else we can do to help?

jasonseminara on Mar 9, 2022

Revisiting the issue here, I realized I need a few more specifics @connorokeefe and @jasonseminara – are you having errors customizing variables using sass or newer versions of Node + node-sass? I’m upgrading node-sass right now in #5211, but if your problems are related to dart-sass usage, you’ll have to wait a little bit longer for #4032. If that’s the case, I’ll close this as a duplicate of #4032.

adidahiya on Mar 31, 2022