How to import external css inside jsx file in react?

Question

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.

You may need an appropriate loader to handle this file type.

.Login {
         padding: 60px 0;
}

I updated in webpack config also.

Webpack config:

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;

In JSX File:

import React from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap"; 
import "./Login.css";

Package.json,

{
  "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"
  }
}

I tried atmost everything, but no solution. Anyone clarify, please.

Answer 1

You will need to add css-loader and style-loader to your dev dependencies in package.json

Link to webpack docs: https://webpack.js.org/concepts/loaders/#using-loaders