Overriding variables in Patternfly 6

[apollo13]

Hi, I am trying to override variables in patternfly 6 like this:

@use "@patternfly/patternfly/patternfly.scss" with (
    $pf-v6-global--font-path: "@patternfly/patternfly/assets/fonts",
    $pf-v6-global--fonticon-path: "@patternfly/patternfly/assets/pficon",
    $fa-font-path: "@patternfly/patternfly/assets/fonts/webfonts"
);

since the webpack sass loader cannot resolve ./assets but I get:

ERROR in ./src/oversight/static_src/oversight.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/oversight/static_src/oversight.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
This variable was not declared with !default in the @used module.
  ╷
4 │     $pf-v6-global--font-path: "@patternfly/patternfly/assets/fonts",
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

What is the proper way to override variables using scss?

[apollo13]

I managed to get it working via:

@charset "utf-8";

@use "@patternfly/patternfly/sass-utilities" with (
    $pf-v6-global--font-path: "@patternfly/patternfly/assets/fonts",
    $pf-v6-global--fonticon-path: "@patternfly/patternfly/assets/pficon",
    $fa-font-path: "@patternfly/patternfly/assets/fonts/webfonts"
);

@use "@patternfly/patternfly/base";
@use "@patternfly/patternfly/components";
@use "@patternfly/patternfly/layouts";

Not sure if that is the way it is ment to be used :)

[mattnolting]

You shouldn't need to include @with as variables are set to !default.

You could something like this

patternfly.scss

@use "@patternfly/patternfly/sass-utilities";
@use "@patternfly/patternfly/base";
@use "@patternfly/patternfly/components";
@use "@patternfly/patternfly/layouts";

$pf-v6-global--font-path: "@patternfly/patternfly/assets/fonts",
$pf-v6-global--fonticon-path: "@patternfly/patternfly/assets/pficon",
$fa-font-path: "@patternfly/patternfly/assets/fonts/webfonts"

or

patternfly.scss

@use "@patternfly/patternfly/sass-utilities";
@use "@patternfly/patternfly/base";
@use "@patternfly/patternfly/components";
@use "@patternfly/patternfly/layouts";
@use "@patternfly/patternfly/my-custom-variables";

my-custom-variables.scss

$pf-v6-global--font-path: "@patternfly/patternfly/assets/fonts",
$pf-v6-global--fonticon-path: "@patternfly/patternfly/assets/pficon",
$fa-font-path: "@patternfly/patternfly/assets/fonts/webfonts"

Lmk if this works for you 👍

[apollo13]

Nope that gives me another error now:

ERROR in ./src/oversight/static_src/vendor.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/oversight/static_src/vendor.scss) 5:36-108
Module not found: Error: Can't resolve './assets/fonts/RedHatText/RedHatTextVF.woff2' in '/home/florian/dev/oversight/src/oversight/static_src'
 @ ./src/oversight/static_src/vendor.scss 8:6-153 20:17-24 24:7-21 50:25-39 51:36-47 51:50-64 55:6-65:7 56:54-65 56:68-82 62:42-53 62:56-70 64:21-28 75:0-123 75:0-123 76:22-29 76:33-47 76:50-64 53:4-66:5
 @ ./src/oversight/static_src/vendor.js 1:0-23

[apollo13]

You shouldn't need to include @with as variables are set to !default.

The docs seem to think differently: https://sass-lang.com/documentation/at-rules/use/#configuration

[mattnolting]

Yep, I read that as well and would recommend if it worked as expected. I tested the solution described above and it worked for me. Seems that this is a known issue sass/dart-sass#2063, I'll try updating dependencies and see if that works.

[apollo13]

@mattnolting any luck with updating the dependencies?