วิธีการนำเข้าไฟล์ CSS ใน React Component

Question 1

ฉันต้องการนำเข้าไฟล์ CSS ไปยังส่วนประกอบการตอบสนอง

ฉันได้ลองแล้วimport disabledLink from "../../../public/styles/disabledLink";แต่ได้รับข้อผิดพลาดด้านล่าง

ไม่พบโมดูล: ข้อผิดพลาด: ไม่สามารถแก้ไข 'file' หรือ 'ไดเร็กทอรี' ../../../public/styles/disabledLink ใน c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @ /client/src/components/ShoppingCartLink.js 19: 20-66 แฮช: 2d281bb98fe0a961f7c4 เวอร์ชัน: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css คือตำแหน่งของไฟล์ CSS ที่ฉันพยายามโหลด

สำหรับฉันดูเหมือนว่าการนำเข้าไม่ได้ค้นหาเส้นทางที่ถูกต้อง

ฉันคิดว่า../../../มันจะเริ่มค้นหาพา ธ สามชั้นโฟลเดอร์ด้านบน

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js คือตำแหน่งของไฟล์ที่ควรนำเข้าไฟล์ CSS

ฉันทำอะไรผิดและฉันจะแก้ไขได้อย่างไร

Question 2

คุณไม่จำเป็นต้องตั้งชื่อหากคุณไม่จำเป็นต้อง:

เช่น

import React from 'react';
import './App.css';

ดูตัวอย่างทั้งหมดได้ที่นี่ ( สร้าง JSX Live Compiler เป็น React Component )

Question 3

คุณต้องใช้css-loaderเมื่อสร้างบันเดิลด้วย webpack

ติดตั้ง:

npm install css-loader --save-dev

และเพิ่มลงในตัวโหลดในการกำหนดค่า webpack ของคุณ:

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

หลังจากนี้คุณจะสามารถรวมไฟล์ css ใน js

Question 4

ฉันขอแนะนำให้ใช้โมดูล CSS:

ตอบสนอง

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

การแสดงผลส่วนประกอบ:

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

Question 5

ต่อไปนี้จะนำเข้าไฟล์ CSS ภายนอกในคอมโพเนนต์ React และส่งออกกฎ CSS ใน<head />เว็บไซต์

ติดตั้งStyle LoaderและCSS Loader :

npm install --save-dev style-loader
npm install --save-dev css-loader

ใน webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

ในไฟล์คอมโพเนนต์:

import './path/to/file.css';

Question 6

โซลูชันข้างต้นมีการเปลี่ยนแปลงและเลิกใช้งานโดยสิ้นเชิง หากคุณต้องการใช้โมดูล CSS (สมมติว่าคุณนำเข้า css-loaders) และฉันพยายามหาคำตอบมานานแล้วและในที่สุดก็ทำ ตัวโหลด webpack เริ่มต้นนั้นแตกต่างกันมากในเวอร์ชันใหม่

ใน webpack ของคุณคุณต้องหาส่วนที่ขึ้นต้นด้วย cssRegex และแทนที่ด้วยสิ่งนี้

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}

Question 7

โมดูล CSS ช่วยให้คุณใช้ชื่อคลาส CSS เดียวกันในไฟล์ต่างๆได้โดยไม่ต้องกังวลเกี่ยวกับการตั้งชื่อที่ขัดแย้งกัน

Button.module.css

.error {
  background-color: red;
}

สไตล์ชีทอื่น

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

Question 8

ติดตั้ง Style Loader และ CSS Loader:

npm install --save-dev style-loader
npm install --save-dev css-loader

กำหนดค่า webpack

module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }

Question 9

ในกรณีที่คุณต้องการเพียงแค่ฉีดรูปแบบจากการสไตล์ชีตเข้าองค์ประกอบโดยไม่ต้อง bundling ในสไตล์ทั้งผมขอแนะนำให้https://github.com/glortho/styled-import ตัวอย่างเช่น:

const btnStyle = styledImport.react('../App.css', '.button')

// btnStyle is now { color: 'blue' } or whatever other rules you have in `.button`.

หมายเหตุ: ฉันเป็นผู้เขียน lib นี้และฉันสร้างขึ้นสำหรับกรณีที่การนำเข้าสไตล์และโมดูล CSS จำนวนมากไม่ใช่โซลูชันที่ดีที่สุดหรือเป็นไปได้มากที่สุด

Question 10

คุณยังสามารถใช้โมดูลที่จำเป็น

require('./componentName.css');
const React = require('react');

Question 11

การใช้ extract-css-chunks-webpack-plugin และ css-loader loader ทำงานให้ฉันดูด้านล่าง:

webpack.config.js นำเข้า extract-css-chunks-webpack-plugin

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

webpack.config.js เพิ่มกฎ cssแยก css Chunks ก่อนจากนั้น css loader css-loader จะฝังลงในเอกสาร html ตรวจสอบให้แน่ใจว่า css-loader และ extract-css-chunks-webpack-plugin อยู่ใน package.json dev การพึ่งพา

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

webpack.config.js สร้างอินสแตนซ์ของปลั๊กอิน

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

และตอนนี้การนำเข้า css เป็นไปได้ และตอนนี้ในไฟล์ tsx เช่น index.tsx ฉันสามารถใช้การนำเข้าเช่นการนำเข้านี้ './Tree.css' โดยที่ Tree.css มีกฎ css เช่น

body {
    background: red;
}

แอปของฉันใช้ typescript และสิ่งนี้ใช้ได้กับฉันตรวจสอบ repo ของฉันเพื่อหาแหล่งที่มา: https://github.com/nickjohngray/staticbackeditor

Question 12

คุณสามารถนำเข้า.cssไฟล์ของคุณใน.jsxไฟล์

นี่คือตัวอย่าง -

import Content from '../content/content.jsx';