title: module parse failed error while importing css file in react with next.js
body: <p>I am trying to implement a react project with using next.js. I want to import some css files into my file like bootstrap or font-awesome. But it fails when I try to start server.</p>
  
  <p>Here is the error:
  Failed to compile
  ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 1:0
  Module parse failed: Unexpected character '' (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a>
  (Source code omitted for this binary file)</p>
  
  <p>I looked some solutions and some says there is a problem with importing way. But I tried the both following but the result is same.</p>
  
  <p>import '../node_modules/font-awesome/css/font-awesome.css'
  import css from'../node_modules/font-awesome/css/font-awesome.css'</p>
  
  <p>Most of the solutions say about the css-loader of webpack and change the config file. I have already tried it also. I've installed this npm install --save-dev css-loader and changed my config file but the problem hasn't changed.</p>
  
  <p>Here my next.config.js file:</p>
  
  <pre><code>const withCSS = require('@zeit/next-css')
  module.exports = withCSS({
  
    webpack: config =&gt; {
      config.module.rules.push({
  
        test: /\.md$/,
        use: "raw-loader",
  
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
  
      );
      return config;
    }
  
  });
  </code></pre>