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

**URL:** https://discourse.roots.io/t/cant-get-build-production-to-work-with-ibm-plex-font/15615
**Category:** sage
**Tags:** webpack
**Created:** 2019-05-22T15:58:32Z
**Posts:** 6

## Post 1 by @sicco — 2019-05-22T15:58:32Z

I Installed the [IBM Plex](https://github.com/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](https://discourse.roots.io/t/how-to-use-ibms-plex-font-in-your-theme/12277) mentions how to use IBM Plex, but it doesn’t work for me :slight_smile:.

Any ideas on what is going wrong?

---

## Post 2 by @mmirus — 2019-05-22T17:19:12Z

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

---

## Post 3 by @sicco — 2019-05-22T18:20:00Z

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;
```

---

## Post 4 by @mmirus — 2019-05-22T20:30:25Z

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

---

## Post 5 by @sicco — 2019-05-29T15:44:37Z

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!

---

## Post 6 by @mmirus — 2019-05-29T15:59:50Z

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