CODEWITHSUNDEEP
reactjssasswebpack
Aessandro
Aessandro

Reputation: 5761

React font error

I have the following in my SASS component:

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot');
  src:  url('../fonts/icomoon.eot') format('embedded-opentype'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Graphink Regular';
  src: url('../fonts/GraphikRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

the first rule for icomoon works fine however webpack is complaining about the second throwing the following error:

ERROR in ./public/fonts/GraphikRegular.ttf
Module build failed: Error: Cannot find module 'file-loader'
    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 Object.module.exports (/Users/alessandro.santese/Desktop/Alessandro/AIA/projects/accenture-tshirtbuilder/tshirtbuilder/node_modules/url-loader/index.js:18:20)
 @ ./~/css-loader!./~/sass-loader!./public/sass/typography.scss 6:514-552

this is my webpack.config

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/js/');
var APP_DIR = path.resolve(__dirname, 'jsx');

var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'app.js'
    },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel'
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            },
            {
              test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
              loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
            }
        ]
    }
};

module.exports = config;

all the fonts are excately in the same folder called "fonts".

Upvotes: 0

Views: 1305

Answers (1)

Herndl
Herndl

Reputation: 41

The error claims it doesn't found the file-loader module. That module is a peerDependency for the url-loader module, maybe you don't have it yet installed. Try to install the module:

npm install --save-dev file-loader

Upvotes: 1

Related Questions