javascript - How to import external css inside jsx file in react? - Stack Overflow

admin管理员组

文章数量:1295861

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.

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.

• javascript
• reactjs
• webpack

Share Improve this question Follow edited Mar 17, 2018 at 8:35 Liam 6,74377 gold badges2727 silver badges4848 bronze badges asked Mar 17, 2018 at 8:16 IdrisIdris 39122 gold badges99 silver badges1616 bronze badges 6

• 1 this is working for me { test: /\.css$/, loader: "style-loader!css-loader" } – Mike Kor Commented Mar 17, 2018 at 8:27
• you can link it to you html file – Egor Egorov Commented Mar 17, 2018 at 8:27
• added package.json file@Liam – Idris Commented Mar 17, 2018 at 8:31
• Getting same error @MikeKor – Idris Commented Mar 17, 2018 at 8:31
• want to import in some ponents only @EgorEgorov – Idris Commented Mar 17, 2018 at 8:32

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 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/concepts/loaders/#using-loaders

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

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

本文标签： javascriptHow to import external css inside jsx file in reactStack Overflow