Javascriptservices: Roboto Font typeface-roboto css is not handled by loader

[Tonvengo]

Hi.
Tried to use type Roboto Font in default react redux template.
Installed it with npm install typeface-roboto --save.
And imported it in layout class.
import * as React from 'react'; import { NavMenu } from './NavMenu'; import 'typeface-roboto';
But when an application loads, I get the following error:
Web\node_modules\typeface-roboto\index.css Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| /* roboto-100normal - latin */
| @font-face {
| font-family: 'Roboto';
| font-style: normal;

In webpack config there is a line that should handle css:
{ test: /.css$/, use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },

What should I do to fix it?

Thank you in advance.

[stephtr]

That is because you are including typeface-roboto also in your server bundle, but your test: /.css$/ rule is only present in the client bundle config.
To solve that issue you could either move the import 'typeface-roboto'; statement into your boot-client.tsx file or add the following to your webpack.config.js's serverBundleConfig:

module: {
  rules: [
    { test: /\.css$/, use: 'css-loader/locals'},
  ]
},

[Tonvengo]

It works, thank you! Had to add loaders for another types (woff, etc.), but that's another story 😄