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

christianmagill · October 10, 2019, 3:29pm

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!

alwaysblank · October 10, 2019, 3:30pm

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.

christianmagill · October 10, 2019, 3:35pm

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

alwaysblank · October 10, 2019, 3:39pm

Do the fonts work when running yarn start?

christianmagill · October 10, 2019, 3:41pm

No they do not show up.

christianmagill · October 15, 2019, 12:32pm

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

ilja · March 5, 2020, 1:13pm

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

dangelion · November 2, 2020, 10:07am

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?

raffjones · November 16, 2020, 5:32pm

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.

ben · November 16, 2020, 7:53pm

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

raffjones · November 16, 2020, 8:02pm

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.

raffjones · November 16, 2020, 8:24pm

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

petemattx · November 23, 2020, 2:42pm

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

raffjones · November 23, 2020, 2:55pm

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)

petemattx · November 23, 2020, 4:30pm

Thanks @raffjones

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

raffjones · November 23, 2020, 4:42pm

v12.8.1

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

petemattx · November 23, 2020, 5:29pm

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.

timichango · November 24, 2020, 9:23am

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.

qbattersby · November 26, 2020, 4:25pm

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…

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.

yeah · December 21, 2020, 9:17am

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