Sage 9 - Fonts not in dist/fonts/ after build

I’ve been having an issue with custom fonts not making it into the “dist” directory.

The build process happens without error whether standard or production, lint also works without issue, but at the end there is no “dist/fonts” folder.

Here’s what my _fonts.scss file looks like.

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Italic.eot");
  src:
    url("../fonts/Lora-Italic.woff2") format("woff2"),
    url("../fonts/Lora-Italic.woff") format("woff"),
    url("../fonts/Lora-Italic.eot?#iefix") format("embedded-opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Regular.eot");
  src:
    url("../fonts/Metropolis-Regular.woff2") format("woff2"),
    url("../fonts/Metropolis-Regular.woff") format("woff"),
    url("../fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Medium.eot");
  src:
    url("../fonts/Metropolis-Medium.woff2") format("woff2"),
    url("../fonts/Metropolis-Medium.woff") format("woff"),
    url("../fonts/Metropolis-Medium.eot?#iefix") format("embedded-opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-MediumItalic.eot");
  src:
    url("../fonts/Metropolis-MediumItalic.woff2") format("woff2"),
    url("../fonts/Metropolis-MediumItalic.woff") format("woff"),
    url("../fonts/Metropolis-MediumItalic.eot?#iefix") format("embedded-opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Bold.eot");
  src:
    url("../fonts/Metropolis-Bold.woff2") format("woff2"),
    url("../fonts/Metropolis-Bold.woff") format("woff"),
    url("../fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-ExtraBold.eot");
  src:
    url("../fonts/Metropolis-ExtraBold.woff2") format("woff2"),
    url("../fonts/Metropolis-ExtraBold.woff") format("woff"),
    url("../fonts/Metropolis-ExtraBold.eot?#iefix") format("embedded-opentype");
  font-weight: 800;
  font-style: normal;
}

And my public path from config.json

"publicPath": "/app/themes/roger",

Any help you could provide is deeply appreciated. Much thanks!

Are you referencing the fonts elsewhere in your CSS? IIRC the build process will only copy assets like fonts if it detects that they’re actually being used.

Yes, Metropolis is set as “$body-font-family” for Foundation framework, and Lora is used explicitly in a few classes.

Do the fonts work when running yarn start?

No they do not show up.

@alwaysblank, Any other ideas?

So far I’ve tried replacing the build directory with a fresh copy, verified the build commands in package.json and double checked the publicPath in config.json.

I’ve also verified that the _fonts.scss is being imported and I’ve added a simple font usage directly to the main.scss file just to see if the build process picks up on it.

I am guessing you figured it out by now. But fonts would actually be copied to dist when you run
yearn build

I’m importing Line Awesome (installed as a package via yarn add line-awesome) with

$la-font-path: "../fonts";
$la-css-prefix: la;
@import "~line-awesome/dist/line-awesome/scss/line-awesome";

Tried any type of path but it doesn’t get it, except for
$la-font-path: "/wp-content/themes/theme_name/resources/assets/fonts/LineAwesome";
but I don’t want to hard code the theme name.

One of the error was resolve-url-loader: CSS error predicate must return an absolute path.

Notice that fonts aren’t copied in dist. It’s an icon font, so I don’t reference to it manually in the CSS.

What’s the correct way to import?

I am seeing this problem with the latest Sage 9, right out of the box.

  • I have dropped a custom WOFF icon font into resources/assets/fonts/social-icons.woff
  • I have included it with @font-face using the relative URL ../fonts/social-icons.woff
  • The public path is correctly set : "publicPath": "/wp-content/themes/test-theme"
  • Running yarn build just throws an error:
 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './social-icons.woff' in '/path/to/wp-content/themes/test-theme/resources/assets/styles'

I see the path in the error is listed as ./social-icons.woff but I can’t see where that is being generated from.

Reverting to an earlier Sage version (9.0.0-beta4) fixes the issue and it builds with no problem, so it looks like there’s something amiss in the webpack config / build directory.

Was this on 9.0.10 (newly released)? If so, 9.0.9 would work I imagine rather than a beta version

Thanks Ben. It was just a case of copying a theme across from something I had close by and it happened to be that version.

I’ll try 9.0.9 and see if that works.

PS: The font in question is a very small file - 3k - so maybe that’s the culprit - I know that small files get Base64 encoded into the CSS directly, don’t they (limit being 4096)? So perhaps something is not quite right there.

Just reporting back.

I pulled down the 9.0.9 release. Unzipped, had to run composer update and there are quite a few issues with dependencies, but with when I change it to use "node-sass": "~4.12.0", I can run npm install. When I run npm run build, it builds with no issues. I can see this in the main.css file:

@font-face {
  font-family: "SocialIcons";
  src: url(data:application/font-woff;base64,d09GRgABAAAAAA2UA...) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Hello @raffjones

I’m very new to Sage and I’m experiencing this resolve-url-loader: CSS error predicate must return an absolute path after trying to import a single font. I came from Sage 9.0.10. I tried your solution of going back to Sage 9.0.9 and node-sass 4.12.0 but I encountered dependency errors for node-sass during npm install.

Can you share your package.json?
Thanks

Hi @petemattx

Try this:

{
  "name": "sage",
  "version": "9.0.9",
  "author": "Roots <team@roots.io>",
  "homepage": "https://roots.io/sage/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/roots/sage.git"
  },
  "bugs": {
    "url": "https://github.com/roots/sage/issues"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "http://opensource.org/licenses/MIT"
    }
  ],
  "browserslist": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ],
  "scripts": {
    "build": "webpack --progress --config resources/assets/build/webpack.config.js",
    "build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
    "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
    "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
    "rmdist": "rimraf dist",
    "lint": "npm run -s lint:scripts && npm run -s lint:styles",
    "lint:scripts": "eslint resources/assets/scripts resources/assets/build",
    "lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
    "test": "npm run -s lint"
  },
  "engines": {
    "node": ">= 8.0.0"
  },
  "devDependencies": {
    "autoprefixer": "~8.2.0",
    "browser-sync": "^2.26.13",
    "browsersync-webpack-plugin": "^0.6.0",
    "bs-html-injector": "~3.0",
    "buble-loader": "^0.4.1",
    "cache-loader": "~1.2.5",
    "clean-webpack-plugin": "^0.1.18",
    "copy-globs-webpack-plugin": "^0.2.0",
    "css-loader": "^0.28.9",
    "cssnano": "~4.0.5",
    "eslint": "~4.19.1",
    "eslint-loader": "~1.9",
    "eslint-plugin-import": "~2.14.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "imagemin-mozjpeg": "~7.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "import-glob": "~1.5",
    "node-sass": "~4.12.0",
    "postcss-loader": "~2.1.0",
    "postcss-safe-parser": "~3.0",
    "resolve-url-loader": "~2.3.1",
    "rimraf": "~2.6",
    "sass-loader": "~6.0",
    "style-loader": "^0.22.1",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "~18.2.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "webpack": "~3.10.0",
    "webpack-assets-manifest": "^1.0.0",
    "webpack-dev-middleware": "~2.0.4",
    "webpack-hot-middleware": "~2.22.3",
    "webpack-merge": "~4.1.4",
    "yargs": "~11.0.0"
  },
  "dependencies": {
    "bootstrap": "v4.3.1",
    "dot-prop": "^6.0.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.14.7"
  }
}

Had to install dot-prop manually and update node-sass but this one works (I’m using it now)

Thanks @raffjones

But still no good on my side :frowning: I’m using Node v14.9.0 currently, is it too advance for Sage 9.0.9?
What node version are you using?

v12.8.1

Maybe try using an earlier version via nvm - the most painless way of using multiple versions.

1 Like

Thanks @raffjones , I think I was able to make it work by using the old versions of sage and node.
I hope the latest version of Sage will be fix soon.

Argh. Just spent the better part of the day banging my head against the wall on this. Also watching eagerly for a fix that doesn’t require a downgrade.

Reckon this is the same issue being discussed at Relative paths to images in CSS doesn't work anymore (ie. background-image path)

…unfortunately, I did try the suggestion of just downgrading resolve-url-loader to ~2.3.1 doesn’t work for me, and chucks different errors:

Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type undefined

…etc.

This is a super painful bug - also interested in a resolve, I am just trying to add the slick-carousel package and getting the same error. Help… :frowning:

Super gross temporarily solution:

  • Remove node_modules folder
  • Backup /resources/assets/build folder to somewhere else
  • Remove Sage 9.0.10 composer.json, composer.lock, yarn.lock

Download .zip of version 9.0.9, move the build folder over, move the composer files over to root, then yarn add your packages, yarn && yarn build.

just got it.
i solved in this way: https://github.com/roots/sage/pull/2572#issuecomment-725446999

1 Like