radium-loader icon indicating copy to clipboard operation
radium-loader copied to clipboard

Error resolving font files

Open wilhen01 opened this issue 8 years ago • 2 comments

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?

wilhen01 avatar Aug 08 '17 14:08 wilhen01

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

wilhen01 avatar Aug 10 '17 09:08 wilhen01

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.

dminkovsky avatar Aug 21 '17 14:08 dminkovsky