Can't get build:production to work with IBM Plex font

sage
1

I Installed the IBM Plex font via yarn add @ibm/plex.
I’ve added import "~@ibm/plex/scss/ibm-plex.scss"; to main.scss.
I’ve added $font-prefix: "~@ibm/plex"; to _variables.scss.

Running yarn build works fine, but when I run yarn build:production I get this error

...
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '@ibm/plex ' in '/theme/resources/assets/styles'
...

I found multiple posts detailing differences between build and build:production, but those seem to be not applicable to my situation. Also this post mentions how to use IBM Plex, but it doesn’t work for me :slight_smile:.

Any ideas on what is going wrong?

2

Hey @sicco - I can take a look if you don’t mind sharing the code from main.scss and _variables.scss. :wink:

1 Like
3

Sure, thanks!

main.scss

@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";
@import "~@ibm/plex/scss/ibm-plex.scss";

/** Import theme styles */
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/index";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

_variables.scss

/** Import Bootstrap functions */
@import "~bootstrap/scss/functions";
$font-prefix: "~@ibm/plex";

$magenta: #e72859;
$lightmagenta: #ff486d;

$theme-colors: (
  primary: $magenta
);

@font-face {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

$font-family-text: "IBM Plex Sans";

/** Bootstrap navbar fix (https://git.io/fADqW) */
$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;
4

Hmm… I don’t see a problem in your code at first glance.

Can you provide your config.json (and double check that it’s correct)? The error you provided in your original post is a little odd–it says it’s looking at /theme/resources/assets/styles for the module, which seems like a strange path. I’d expect something like /app/themes/my-theme/resources/assets/styles or /wp-content/themes/my-theme/resources/assets/styles.

I did a test in a vanilla Sage theme using the following, and it’s working on both yarn build and yarn build:production.

main.scss

@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";
@import "~@ibm/plex/scss/ibm-plex";

/** Import theme styles */
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

_variables.scss

/** Import Bootstrap functions */
@import "~bootstrap/scss/functions";

$font-prefix: "~@ibm/plex";

$theme-colors: (
  primary: #525ddc
);

/** Bootstrap navbar fix (https://git.io/fADqW) */
$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;

_global.scss

body {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

Two asides that might be useful once you get it working:

  1. FWIW, you don’t need to declare an @font-face rule since those are included in the SCSS you’re importing from @ibm/plex.
  2. If you’re just using one or two variants of the font, you might want to only import those. For example, if you’re only using Sans, then try @import "~@ibm/plex/scss/sans/index"; instead of @import "~@ibm/plex/scss/ibm-plex";.

Edit: also, even if you did need to write an @font-face, that’s not where you would declare a font stack to be used like you’re doing ("IBM Plex Sans", "Helvetica Neue", Arial, sans-serif). You’d just give the name of the font you’re informing the browser about ('IBM Plex Sans'). You’d put the font stack in your CSS when styling a specific element or set of elements (see the _global.scss example I gave above), or if you’re using Bootstrap you might put it in a variable like $font-family-sans-serif (and then Bootstrap would use it to create the final styles).

1 Like
5

Sorry for the late reply.

Thanks for your detailed response!

I somehow can’t reproduce my own problem anymore :blush::smile:. build:production now runs fine.

Thanks for the tips on fonts, I’ve applied them!

1 Like
6

Sometimes that’s the way it goes–glad it’s working!

1 Like