Webpack font parse error prevents build

Sage 9.0.0-beta.2, webpack 2.2.0, Node 6.9.0, Yarn 0.19.1.

I’ve run into an issue when running the build command. I have font files in \assets\fonts\ , referenced by _global.scss in \assets\styles\common.

I’m pulling the fonts like this:

    font-family: 'Graphik LC Web';
    src: url('../../fonts/Graphik-Regular-Web.eot');
}``` 

This works fine with yarn run start, but when I try to build for production, I get this error:

``` ERROR in ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss```

```Module not found: Error: Can't resolve '../../fonts/Graphik-Regular-Web.eot' in 'theme/assets/styles'```

Ok, fine. I moved the fonts to the root to see if that would build successfully, I now I see a parse error instead:

```ERROR in ./styles/main.scss
Module build failed: ModuleParseError: Module parse failed: /theme/fonts/Graphik-Regular-Web.woff``` 

```Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.```

Is there an underlying flaw in my technique? 

Thanks!
2 Likes

I haven’t quite solved this issue, but I did put together a workable solution today.

I added a new test to the webpack config with font extensions and a ridiculously low limit to stop webpack from either parsing the fonts or adding a hash to the end. Chrome doesn’t load fonts properly with a hash in the filename.

{
   test: /\.(woff2|woff|ttf|eot|svg|otf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
   loaders: ["url-loader?limit=100&name=fonts/[name].[ext]"]
}

I’m still not sure where the asset path mixup comes in. The build command finds the font files in the correct location, but production builds still pull one directory too far down.

Experiencing same problem, I guess it makes sense since global/variable is one level deeper nested on local vs stage/prod. But what wouldl be the prefered way of adding fonts to Sage 9?

1 Like

Any asset really. I can’t load anything into my stylesheet without breaking the production build.

Hey,

You might get it working by changing the path ../../fonts/ to ../fonts/, but I’m not sure if it works. Haven’t tested yet. If it doesn’t try this setup:

I managed to add fonts with these steps:

  1. Put font files in assets/fonts folder

  2. Add font path to assets/styles/variables.scss like so: $icomoon-font-path: '../fonts' !default;

  3. Define font in any sass file in assets/styles (I created a new file in assets/styles/components/icons.scss for my use):
    @font-face { font-family: 'shopicons'; src: url('#{$icomoon-font-path}/shopicons.eot?kleikl'); src: url('#{$icomoon-font-path}/shopicons.eot?kleikl#iefix') format('embedded-opentype'), url('#{$icomoon-font-path}/shopicons.ttf?kleikl') format('truetype'), url('#{$icomoon-font-path}/shopicons.woff?kleikl') format('woff'), url('#{$icomoon-font-path}/shopicons.svg?kleikl#shopicons') format('svg'); font-weight: normal; font-style: normal; }

And if you need fonts included via npm, you got to make sure that webpack knows the path by telling it in _variables.scss.

In example I needed to do this for mdi icons and roboto font (I’m using roboto from materialize and included mdi icon pack for my project):
// Roboto fonts $roboto-font-path: "~materialize-css/fonts/roboto/" !default; // MDI icons $mdi-font-path: "~mdi/fonts/" !default;

(notice ‘~’ before node__module/“put-your-module-folder-name-here” folder)

Not quite sure if you need to put !default after the font path, but I did and it works like a charm

Hope this helps you guys as it helped me!

2 Likes

If it helps someone else later on: I can confirm it works with ../fonts/ using both yarn start and yarn build:production. Thanks @Eljas.

3 Likes