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.

this is working for me { test: /\.css$/, loader: "style-loader!css-loader" } — Mike Kor
– Mike Kor, Commented Mar 17, 2018 at 8:27

Pranita · Accepted Answer · 2018-03-17 09:46:57Z

3

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

answered Mar 17, 2018 at 9:46

Pranita

3392 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kartonnade · Accepted Answer · 2020-07-23 10:16:49Z

1

The way I do it (ex: import fonts from fonts.com) :

create a css file,
import external css in local css file
import local css file in js

answered Jul 23, 2020 at 10:16

kartonnade

814 bronze badges

1 Comment

toddmo Over a year ago

+1 because although a bit clunky feeling, it sidesteps the hours of frustration one might get trying to import a cdn css directly into a jsx file. You should add code example for each file here.

Collectives™ on Stack Overflow

How to import external css inside jsx file in react?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related