radium-loader
radium-loader copied to clipboard
Error resolving font files
I'm trying to use the radium-loader to load CSS files which reference seperate font files with CSS like the following:
@font-face {
font-family: 'Weissenhof';
src: url('../fonts/weissenhof-lt.eot');
src: url('../fonts/weissenhof-lt.eot?#iefix') format('embedded-opentype'), url('../fonts/weissenhof-lt.woff2') format('woff2'), url('../fonts/weissenhof-lt.woff') format('woff'), url('../fonts/weissenhof-lt.ttf') format('truetype'), url('../fonts/weissenhof-lt.svg#weissenhof-lt') format('svg');
font-weight: 200;
font-style: normal;
}
When I do, I get the following error:
Module build failed: Error: Cannot find module '../fonts/weissenhof-lt.eot'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at eval (eval at <anonymous> (C:\Projects\retailer-portal\src\Service.Host\client\node_modules\radium-loader\dist\index.js:14:8), <anonymous>:6:183)
at Object.exports.default (C:\Projects\retailer-portal\src\Service.Host\client\node_modules\radium-loader\dist\index.js:14:3)
I've tried both using the loader inline in the import statements e.g. import 'style-loader!css-loader!postcss-loader!../css/font-awesome.min.css'; and using module rules in the webpack config e.g.
{
test: /\.css$/,
use: [
'radium-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
Neither of these approaches work. I've also tried chaining resolve-url-loader but this doesn't make any difference either. Can anyone help? Does radium-loader actually support fonts referenced in this way?
Eventually resorted to splitting fonts (and other unsupported features like keyframes) into a separate file which is loaded without radium, and using radium for the rest. Would be nice if this was fixed in future...
Thank you for reporting, troubleshooting and updating. This module is a thin wrapper around css-to-radium, so it only supports whatever css-to-radium supports. As far as I know, css-to-radium does not support @keyframes and @font-face and things like that.