title: How to import external css inside jsx file in react?
body: <p>I have to add the css file externally. Tried with the code import "./Login.css"; which is located in the base path. Cant able to get the file, which turns the error like below.</p>
  
  <p><strong>You may need an appropriate loader to handle this file type.</strong></p>
  
  <pre><code>.Login {
           padding: 60px 0;
  }
  </code></pre>
  
  <p>I updated in webpack config also.</p>
  
  <p>Webpack config:</p>
  
  <pre><code>var config = {
     entry: './main.js',
  
     output: {
        path:'/',
        filename: 'index.js',
     },
  
     devServer: {
        inline: true,
        port: 8080
     },
  
     module: {
        loaders: [
        {
        test: /\.css$/,  
        include: /node_modules/,  
        loaders: ['style-loader', 'css-loader'],
   },
           {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
  
              query: {
                 presets: ['es2015', 'react']
              }
           }
        ]
     }
  }
  
  module.exports = config;
  </code></pre>
  
  <p>In JSX File:</p>
  
  <pre><code>import React from 'react';
  import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap"; 
  import "./Login.css";
  </code></pre>
  
  <p><strong>Package.json,</strong></p>
  
  <pre><code>{
    "name": "reactapp",
    "version": "1.0.0",
    "description": "Tetser",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --hot"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "react": "^15.6.1",
      "react-bootstrap": "^0.32.1",
      "react-dom": "^15.6.1"
    }
  }
  </code></pre>
  
  <p>I tried atmost everything, but no solution. Anyone clarify, please.</p>