BlueprintJS change primary colour

Question

I am trying to change the primary colour for BlueprintJS in react. Below is the following information on my setup.

Dependencies in packages.json:

"dependencies": {
        "@blueprintjs/core": "^4.11.2",
        "@blueprintjs/icons": "^4.6.3",
        "@blueprintjs/select": "^4.8.2",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.5.2",
        "@types/node": "^16.11.64",
        "@types/react": "^18.0.21",
        "@types/react-dom": "^18.0.6",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "sass": "^1.55.0",
        "typescript": "^4.8.4",
        "web-vitals": "^2.1.4"
      }

In the index.scss I have the following:

@import "~normalize.css";
@import "~@blueprintjs/core/src/blueprint";
@import "~@blueprintjs/icons/src/blueprint-icons";
@import "~@blueprintjs/select/src/blueprint-select";

// I have also tried this above the imports.
$pt-intent-primary: #5655bc !default;

When I run the app, I just get the following error:

Compiled with problems:X

ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
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 18:9                             @import
  src\index.scss 2:9                                                                 root stylesheet

I have gone through a lot of the issues listed on GitHub and people have said they have gotten around it by doing this:

@use "@blueprintjs/core/src/blueprint" with (
  $pt-intent-primary: #5655bc
);
@use "~@blueprintjs/icons/src/blueprint-icons";
@use "~@blueprintjs/select/src/blueprint-select";
@import "~normalize.css";

But I get the same error. It looks like people have managed to do this, but I cannot seem to get it working and I cannot find any step-by-step instruction on what exactly I need to do to just change a variable.

BlueprintJS change primary colour

0 Answers0