Hướng dẫn import external css in reactjs - nhập css bên ngoài trong reactjs

Tôi phải thêm tệp CSS bên ngoài. Đã thử với nhập mã "./login.css"; nằm trong đường dẫn cơ sở. Không thể nhận được tệp, biến lỗi như dưới đây.

Bạn có thể cần một trình tải thích hợp để xử lý loại tệp này.

.Login {
         padding: 60px 0;
}

Tôi cũng đã cập nhật trong cấu hình webpack.

Cấu hình webpack:

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;

Trong tệp JSX:

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

Tôi đã thử tối đa tất cả mọi thứ, nhưng không có giải pháp. Bất cứ ai làm rõ, xin vui lòng.

Tổng quan

Trong ảnh này, chúng tôi sẽ đi qua những cách tốt nhất để thêm mã CSS vào React JS hoặc vào ứng dụng React. CSS rất quan trọng trong việc làm cho ứng dụng của bạn thân thiện với người dùng và hấp dẫn trực quan. Dưới đây là các cách khác nhau để thêm CSS vào ứng dụng React.

Biểu đồ bên ngoài

Bạn có thể tạo một tệp CSS mới trong thư mục dự án của mình và thêm CSS của bạn bên trong nó. Sau đó, bạn có thể nhập tệp vào trang thành phần, lớp hoặc React JS của bạn.

Bạn có thể sử dụng mã bên dưới để nhập bảng kiểu CSS bên ngoài:

import "./styles.css";

CSS nội tuyến

CSS nội tuyến có lẽ là phương pháp phổ biến nhất và nhanh nhất trong ba phương pháp để thêm CSS vào ứng dụng React. Tuy nhiên, nó có nhiều nhược điểm và thường không được khuyến khích sử dụng trừ khi bạn có một ứng dụng rất nhỏ. is probably the most common and quickest out of the three methods to add CSS to a React app. However, it has many disadvantages and is generally discouraged to use unless you have a very small application.

Chúng tôi tạo một đối tượng chứa các tài liệu tham khảo khác nhau, sau đó chúng tôi gọi với thuộc tính

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;

Ví dụ: CSS được thêm vào như hình dưới đây:

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

CSS sau đó được thêm vào một phần tử như vậy:

Các thành phần kiểu dáng

Các thành phần theo kiểu cho phép bạn viết CSS thực tế trong JavaScript của bạn. Ưu điểm chính là bạn có thể thêm mã có điều kiện và sử dụng các biến và chức năng trong CSS. let you write actual CSS in your JavaScript. The main advantage is that you can add conditional code and use variables and functions within the CSS.

Bạn có thể cài đặt

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;

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;

Tiếp theo, bạn cần nhập

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;

import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color:red;
`
//display the HTML
render(
  

    Button
  
);

Mô -đun CSS

Bạn cũng có thể thêm các kiểu vạch ra một cách dễ dàng, vì bạn chỉ cần tạo một tệp có phần mở rộng

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;

// ComponentName.module.css

.Red {
  color: #f00;
}

.Blue {
  color: #00f;
}

Sau đó, bạn nhập các kiểu như sau:

import styles from "./ComponentName.module.css";

Bây giờ bạn có thể sử dụng các kiểu như hình dưới đây:

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;

CSS nguyên tử

Một trong những khung CSS nguyên tử phổ biến nhất ngoài kia là đuôi. Nếu bạn bao gồm Tailwind trong dự án của mình bằng cách làm theo các hướng dẫn chính thức, bạn có thể sử dụng

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;

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;

Cảm xúc

Các thành phần kiểu dáng không phải là thư viện duy nhất cho phép bạn tạo các thành phần có kiểu nhúng. Một thay thế là cảm xúc. Điều tốt nhất về cảm xúc là khung của nó là bất khả tri, vì vậy bạn có thể đưa kiến ​​thức của mình đến các thư viện và khung khác ngoài phản ứng, trong khi khá giống với các thành phần kiểu dáng, vì vậy bạn có thể thay đổi nhập trong một số kịch bản).Emotion. The best thing about Emotion is that its framework is agnostic, so you can take your knowledge to other libraries and frameworks besides React, while being pretty similar to styled-components, so you can change the import in several scenarios).

Trong bức ảnh này, chúng tôi đã vượt qua các tùy chọn sẽ đánh dấu vào hầu hết các hộp cần thiết khi thêm CSS vào ứng dụng của bạn.

Người đóng góp

Saleh Mubashar

Làm cách nào để nhập mô -đun CSS vào React?

Làm thế nào để bạn liên kết CSS với React JS?

Tại sao CSS bên ngoài không hoạt động trong React?

Tôi có thể nhập nhiều tệp CSS phản ứng không?