Can't resolve fonts on css

[lutaev]

The problem: when I try to build app using webpack, I get an error:

ERROR in ./~/css-loader?root=.&sourceMap&modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]!./~/postcss-loader?sourceMap!./~/sass-loader!./~/toolbox-loader!./~/react-notifications/lib/notifications.css Module not found: Error: Cannot resolve module 'fonts/notification.eot' in /Users/artyom/teambeat/ui/nodemodules/react-notifications/lib @ ./~/css-loader?root=.&sourceMap&modules&importLoaders=1&localIdentName=[local][hash:base64:5]!./~/postcss-loader?sourceMap!./~/sass-loader!./~/toolbox-loader!./~/react-notifications/lib/notifications.css 6:87-127

My webpack config:

var webpack = require('webpack')
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var prod = process.env.NODE_ENV === 'production';
if (prod) { var AssetsPlugin = require('assets-webpack-plugin'); }

module.exports = {
  entry: {
    app: prod ? './app/app.jsx' : ['webpack/hot/dev-server', './app/app.jsx'],
  },
  output: {
    filename: prod ? '[name].[hash].js' : '[name].js',
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/ui/'
  },
  plugins: [
    new ExtractTextPlugin(prod ? '[name].[hash].css' : '[name].css', {allChunks: true}),
    prod ? new AssetsPlugin({path: path.join(__dirname, 'dist/')}) : function() {}
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {presets: ['react', 'es2015']}
      },
      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?root=.&sourceMap&modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]!postcss?sourceMap!sass!toolbox')
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\S+)?$/,
        loader: 'file-loader?name=[name].[ext]'
      }
    ]
  },
  toolbox: {
    theme: path.join(__dirname, 'app/styles/toolbox-theme.scss')
  },
  postcss: function() {
    return [
      require('autoprefixer'), require('precss')
    ];
  },
  resolve: {
    modulesDirectories: ['node_modules', 'bower_components', '../app'],
    extensions: ['', '.jsx', '.js', '.json', '.scss', '.eot', '.ttf', '.svg', '.woff'],
    root: path.resolve('./app')
  }
}

May be, problem i in my config, but I looked in notification.css and I saw that if we change

src: url("fonts/notification.eot?s3g3t9");

to

src: url("./fonts/notification.eot?s3g3t9");

everything is good.

[minhtranite]

Please try remove root=. parameter for css-loader. https://github.com/webpack/css-loader#root-relative-urls

[lutaev]

Unfortunately no, it didn't help. But I could solve it with alias in webpack config:

resolve: {
    modulesDirectories: ['node_modules', 'bower_components', '../app'],
    extensions: ['', '.jsx', '.js', '.json', '.scss', '.eot', '.ttf', '.svg', '.woff'],
    alias:{
      fonts: path.resolve(__dirname, 'node_modules', 'react-notifications', 'lib', 'fonts')
    },
    root: path.resolve('./app')
  }

[minhtranite]

Fixed by commit https://github.com/vn38minhtran/react-notifications/commit/596fc93b6eeeb14c747258d8aa0331f82ff110b8

[agarwalvinit]

Hey I am getting the same error. I am not putting import 'react-notifications/lib/notifications.css'; in webpack I am putting it in index.js which is my entry point my webpack.config.js is :- module.exports = { entry: "./index.js", output: { path: '../resources/static/bundle', filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.scss$/, loader: 'style!' + 'css?sourceMap' + '!sass?sourceMap' }, { test: /\.(js|jsx)/, exclude: /node_modules/, loader: 'babel-loader', query: { presets:['es2015','react'] } } ] }, devtool: 'source-map' };