Roots Discourse

Building Production / Main.scss Resolve Font Error

Hello, I’m running the command npm run build:production and getting an error in in ./resources/assets/styles/main.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../../fonts/CaviarDreams.woff' in '/mnt/c/Users/Kenny/Local Sites/ngcw/app/public/wp-content/themes/nextgen/resources/assets/styles'

Other info:

npm ERR! Linux 4.4.0-17134-Microsoft
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "build:production"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! sage@9.0.9 build:production: `webpack --env.production --progress --config resources/assets/build/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the sage@9.0.9 build:production script 'webpack --env.production --progress --config resources/assets/build/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sage package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --env.production --progress --config resources/assets/build/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs sage
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls sage
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/c/Users/Kenny/Local Sites/ngcw/app/public/wp-content/themes/nextgen/npm-debug.log

Here’s how I’ve included my font:

@font-face {
    font-family: 'Caviar Dreams';
    font-weight: 300;
    font-style: normal;
    src: url('../../fonts/CaviarDreams.woff2') format('woff2'),
	    url('../../fonts/CaviarDreams.woff') format('woff');
    font-display: swap;

Is there a better way to include the font or am I not doing it correctly? Thanks for the help!

You are going two directories up (../../), but then you will end up with /mnt/c/Users/Kenny/Local Sites/ngcw/app/public/wp-content/themes/nextgen/resources/fonts/. You probably put the fonts into /mnt/c/Users/Kenny/Local Sites/ngcw/app/public/wp-content/themes/nextgen/resources/assets/fonts/.
(The paths in the styles files are relative to styles/).

Hey! Thanks for the response. So, if I think I understand what you’re saying, I need to use ../fonts/ instead of ../../fonts/. I tried that, and it doesn’t seem to be giving me the error anymore!

Thank you!

Glad that this helped. Please mark my answer as solution when it fixed the issue.