Skip to content
This repository has been archived by the owner on Dec 28, 2020. It is now read-only.

Error resolving font files #6

Open
wilhen01 opened this issue Aug 8, 2017 · 2 comments
Open

Error resolving font files #6

wilhen01 opened this issue Aug 8, 2017 · 2 comments

Comments

@wilhen01
Copy link

wilhen01 commented Aug 8, 2017

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
Copy link
Author

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

@dminkovsky
Copy link
Owner

dminkovsky commented Aug 21, 2017

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants