CODEWITHSUNDEEP
javascriptreactjswebpack
Idris
Idris

Reputation: 391

How to import external css inside jsx file in react?

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.

Upvotes: 5

Views: 19772

Answers (2)

kartonnade
kartonnade

Reputation: 81

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

Upvotes: 1

Pranita
Pranita

Reputation: 339

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

Upvotes: 3

Related Questions