Unable to override default styles for .scss

[connorokeefe]

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.

[adidahiya]

seems related to #4032 and #4415, try building with node-sass for now until we migrate to dart sass

[jasonseminara]

@adidahiya any update on this? This is blocking a project. Is there something I can help with?

[adidahiya]

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

[jasonseminara]

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?

[dylangrandmont]

After upgrade to v4 I am unable to override default colors (e.g. $blue2), even using node-sass. Has anything changed from v3 which would impact this?

[dmackerman]

@jasonseminara Obviously @adidahiya isn't the only dev on the project. Don't be rude. They don't owe you anything.

If you need functionality before it's shipped, consider forking the repo and fixing it yourself. The library isn't "crippled" because it doesn't bend to your use-case.

Additionally, they already gave you a timeline for the update.

[adidahiya]

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]

Should be fixed either with the node-sass upgrade in #5211, or the dart-sass migration in #5216.

[ptgamr]

@adidahiya I've just confirmed that this is not yet fixed after migrating to dart-sass.

// main.scss
@import '~@blueprintjs/core/src/blueprint.scss';

I've done the migration myself, and still get this error when building our widget:

SassError: SassError: (path: (fill: #5f6b7c)) 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 86:9                             @import
  src/@uploader/UploaderExternal.scss 9:9

[adidahiya]

@ptgamr How are you running the Sass compiler? We use some custom functions in our Sass source; if you want to compile it, I think you'll need to include them:

blueprint/packages/core/package.json

Line 30 in c1d7849

"compile:css": "sass-compile --functions ./scripts/sass-custom-functions.js ./src",

our sass-compile script is exported in the package @blueprintjs/node-build-scripts, but YMMV on non-Blueprint library projects; I've only used it in a couple component library monorepos.

[ptgamr]

Thanks @adidahiya for the references, yeah, I am using webpack sass-loader and seems like I don't have that custom functions.

Found a work around in here #2976 (comment) ... not perfect, but got my build working again.

To have a fully working solution, I guess I have to find out how to config webpack sass-loader with a custom functions, and how to reference Blueprint's sass-custom-functions.js (maybe do a clone in my project?). Then teaching it how to find the svg resources to perform the inline extraction... which might be a bit tricky.

[andersHj]

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

[dlech]

• 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.

Is there not a package that includes these? Manually copying them seems a bit tedious.

[dlech]

Or maybe we could eliminate the svg-icon function and use the font icons instead?

[tihuan]

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

Wow thanks so much for the steps! I'm upgrading our project from Next11 to Next12 + Blueprint3 to 4, and following this worked on the first try ✨