React Css loader issue when I execute npm start

Question

I am facing issue when I execute npm start command.I am using ubuntu and node 4.2.2 version.

ERROR in ./~/css-loader!./~/autoprefixer-loader?browsers=last 3 versions!./~/sass-loader?outputStyle=expanded&includePaths[]=path/node_modules!./src/styles/index.scss Module not found: Error: Cannot resolve 'file' or 'directory' ../../assets/fonts/Roboto/roboto-light.eot in path/src/styles

My project file structure is

webclient/
   assets/
      fonts/
        Material Icons/
        Roboto/
        RobotoDraft/

Answer 1

Install file-loader then test for

  test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,

  use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts/',
              name: '[name][hash].[ext]',
          },
        },
      ],

Using file-loader, u can save fonts in build directory

You can also use url-loader, so that u can inline the fonts in your build js file.