Cách nhập tệp CSS trong Thành phần React

Question 1

Tôi muốn nhập tệp CSS vào một thành phần phản ứng.

Tôi đã thử import disabledLink from "../../../public/styles/disabledLink";nhưng gặp lỗi bên dưới;

Không tìm thấy mô-đun: Lỗi: Không thể giải quyết 'tệp' hoặc 'thư mục' ../../../public/styles/disabledLink trong c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Phiên bản: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css là vị trí của tệp CSS mà tôi đang cố tải.

Đối với tôi, có vẻ như nhập khẩu không tìm kiếm đúng đường dẫn.

Tôi nghĩ với ../../../nó sẽ bắt đầu tra cứu đường dẫn ba lớp thư mục ở trên.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js là vị trí của tệp sẽ nhập tệp CSS.

Tôi đang làm gì sai và làm thế nào tôi có thể sửa chữa nó?

Question 2

Bạn thậm chí không cần phải đặt tên cho nó nếu bạn không cần:

ví dụ

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

xem ví dụ đầy đủ tại đây ( Xây dựng Trình biên dịch trực tiếp JSX làm Thành phần phản ứng ).

Question 3

Bạn cần sử dụng css-loader khi tạo gói với webpack.

Cài đặt nó:

npm install css-loader --save-dev

Và thêm nó vào trình tải trong cấu hình gói web của bạn:

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

Sau đó, bạn sẽ có thể bao gồm các tệp css trong js.

Question 4

Tôi sẽ đề xuất sử dụng Mô-đun CSS:

Phản ứng

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

Kết xuất Thành phần:

<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

Phần sau nhập một tệp CSS bên ngoài trong một thành phần React và xuất các quy tắc CSS trong <head />trang web.

Cài đặt Trình tải kiểu và Trình tải CSS :

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

Trong webpack.config.js:

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

Trong một tệp thành phần:

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

Question 6

Các giải pháp trên đã được thay đổi hoàn toàn và không được dùng nữa. Nếu bạn muốn sử dụng mô-đun CSS (giả sử bạn đã nhập css-loaders) và tôi đã cố gắng tìm câu trả lời cho điều này trong một thời gian dài và cuối cùng đã làm được. Trình tải webpack mặc định khá khác trong phiên bản mới.

Trong gói web của bạn, bạn cần tìm một phần bắt đầu bằng cssRegex và thay thế nó bằng phần này;

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

Question 7

Mô-đun CSS cho phép bạn sử dụng cùng một tên lớp CSS trong các tệp khác nhau mà không cần lo lắng về việc đặt tên xung đột.

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.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

Cài đặt Trình tải kiểu và Trình tải CSS:

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

Định cấu hình gói web

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

Question 9

Trong trường hợp bạn chỉ muốn đưa một số kiểu từ biểu định kiểu vào một thành phần mà không cần gộp chung trong toàn bộ biểu định kiểu, tôi khuyên bạn nên https://github.com/glortho/styled-import . Ví dụ:

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

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

LƯU Ý: Tôi là tác giả của lib này và tôi đã xây dựng nó cho các trường hợp nhập hàng loạt các kiểu và mô-đun CSS không phải là giải pháp tốt nhất hoặc khả thi nhất.

Question 10

Bạn cũng có thể sử dụng mô-đun được yêu cầu.

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

Question 11

Sử dụng extract-css-chunks-webpack-plugin và trình tải css-loader phù hợp với tôi, hãy xem bên dưới:

webpack.config.js Nhập giải nén-css-chunks-webpack-plugin

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

webpack.config.js Thêm quy tắc css , Giải nén css Chunks trước rồi trình nạp css css-loader sẽ nhúng chúng vào tài liệu html, đảm bảo css-loader và extract-css-chunks-webpack-plugin nằm trong package.json dev sự phụ thuộc

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

webpack.config.js Tạo phiên bản của plugin

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

Và bây giờ có thể nhập css Và bây giờ trong tệp tsx như index.tsx tôi có thể sử dụng nhập như nhập này './Tree.css' trong đó Tree.css chứa các quy tắc css như

body {
    background: red;
}

Ứng dụng của tôi đang sử dụng typecript và điều này phù hợp với tôi, hãy kiểm tra repo của tôi để tìm nguồn: https://github.com/nickjohngray/staticbackeditor

Question 12

Bạn có thể nhập .csstệp của mình vào .jsxtệp

Đây là một ví dụ -

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