Cara mengimpor file CSS di React Component

98

Saya ingin mengimpor file CSS menjadi komponen react.

Saya sudah mencoba import disabledLink from "../../../public/styles/disabledLink";tetapi saya mendapatkan kesalahan di bawah ini;

Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'file' atau 'direktori' ../../../public/styles/disabledLink di c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Versi: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css adalah lokasi file CSS yang saya coba muat.

Bagi saya, sepertinya import tidak mencari jalur yang benar.

Saya pikir dengan ../../../itu akan mulai mencari jalur tiga lapisan folder di atas.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js adalah lokasi file yang harus mengimpor file CSS.

Apa yang saya lakukan salah dan bagaimana cara memperbaikinya?

javascript reactjs relative-path kandung
sumber
Hai apa
kabar
Hei, kamu benar tapi masih belum berhasil. Saya perhatikan bahwa saya tidak dapat menggunakan impor, karena saya tidak dapat menggunakan ekspor dalam file CSS
venter
menggunakan cara ini stackoverflow.com/questions/39926493/…
anson
Saya mendapatkan kesalahan -> layar khusus media dan (min-width: 320px) dan (max-width: 640px) {^ SyntaxError: Token tidak valid atau tidak terduga di Module._compile (internal / modules / cjs / loader.js: 723 : 23)
Sadan dan

Jawaban:

159

Anda bahkan tidak perlu memberi nama jika tidak perlu:

misalnya

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

lihat contoh lengkapnya di sini ( Membangun JSX Live Compiler sebagai Komponen React ).

code4jhon.dll
sumber
5
Tidak berfungsi untuk saya, ketika saya mencoba menjalankan mocha dengan register babel saya mendapatkan ... I: \ .... css: 1 (function (ekspor, memerlukan, modul, __filename, __dirname) {.filter-bg {^ SyntaxError: Token tak terduga.
JGleason
3
Atau, gunakan react-helmet dan masukkan css (jika itu url) di tag <head>
Kira
53

Anda perlu menggunakan css-loader saat membuat bundel dengan webpack.

Instal itu:

npm install css-loader --save-dev

Dan tambahkan ke pemuat di konfigurasi webpack Anda: 

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

Setelah ini, Anda dapat memasukkan file css di js.

Alexandr Lazarev
sumber
1
Saya tidak diizinkan untuk mengimpor modul lain ke dalam proyek ini. Apakah solusi mereka yang lain hanya bekerja dengan reactjs atau native js?
venter
Jadi saya pikir saya harus menggunakan sesuatu seperti ini: HTMLElement.style
venter
Ini terlihat agak jelek. Mengapa Anda tidak diizinkan untuk menambahkan perubahan dalam pembuatan bundel?
Alexandr Lazarev
Ini adalah postprocessing untuk workship tentang reactjs dan kami diberitahu untuk menyelesaikan persyaratan dengan modul yang disertakan selama workship
venter
Oke, tapi hanya ingin menyebutkan bahwa mengambil tag gaya tidak mengimpor file css seperti yang Anda tanyakan dalam pertanyaan Anda. Ini adalah 2 masalah berbeda.
Alexandr Lazarev
32

Saya menyarankan menggunakan Modul CSS:

Reaksi

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

Merender Komponen:

<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>
Mihir Patel
sumber
Saya akan menambahkan bagian 1 sebagai jawaban di bawah ini. Dan Anda dapat mengikuti jawaban saya untuk menguji komponen Anda.
Mihir Patel
2
Jika mencoba ini dan tidak berhasil. Saya mencoba memasukkannya seperti ini: import styles from "./disabledLink.css";dan mendapatkan kesalahan berikut: Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'file' atau 'direktori' ./disabledLink.css di c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49
venter
1
modul css harus dipasang terpisah, github.com/css-modules/css-modules
Alexandr Lazarev
1
Dan bagaimana saya bisa menulis kueri media untuk jenis CSS seperti itu, Ide apa pun?
Sonu Bamniya
18

Yang berikut mengimpor file CSS eksternal dalam komponen React dan mengeluarkan aturan CSS di <head />situs web.

  1. Instal Style Loader dan CSS Loader :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. Di webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. Dalam file komponen:
import './path/to/file.css';
Webars
sumber
Dan saya menggunakan babel untuk menjalankan pengamat. Mungkin itu tidak melihat ke dalam file webpack.config.js sama sekali
Anton Danilchenko
Sudahkah Anda menginstal css-loader? Saya juga tidak melihat webpack.config.js Anda.
Webars
1
Anda dapat menambahkan lebih banyak aturan modul dalam format objek sebagai rulesnilai array.
Ari
4

Solusi di atas benar-benar berubah dan tidak digunakan lagi. Jika Anda ingin menggunakan modul CSS (dengan asumsi Anda mengimpor css-loader) dan saya telah mencoba menemukan jawabannya untuk waktu yang lama dan akhirnya melakukannya. Loader webpack default sangat berbeda di versi baru.

Di webpack Anda, Anda perlu mencari bagian yang dimulai dengan cssRegex dan menggantinya dengan ini;

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}
Ugur Yilmaz
sumber
stackoverflow.com/questions/53572200/… Solusi alternatif
Maulik Sakhida
2

Modul CSS memungkinkan Anda menggunakan nama kelas CSS yang sama di file yang berbeda tanpa khawatir tentang bentrokan penamaan.

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>;
  }
}
Amaresh Tiwari
sumber
1

  1. Instal Style Loader dan CSS Loader:

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

  2. Konfigurasikan webpack

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

Jika Anda hanya ingin memasukkan beberapa gaya dari stylesheet ke dalam komponen tanpa memaketkan seluruh stylesheet, saya sarankan https://github.com/glortho/styled-import . Sebagai contoh:

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

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

CATATAN: Saya adalah penulis lib ini, dan saya membuatnya untuk kasus-kasus di mana impor massal dari gaya dan modul CSS bukanlah solusi terbaik atau paling layak.

glortho
sumber
0

Anda juga dapat menggunakan modul yang diperlukan.

require('./componentName.css');
const React = require('react');
Juan Navarrete
sumber
0

Menggunakan extract-css-chunks-webpack-plugin dan css-loader loader berfungsi untuk saya, lihat di bawah:

webpack.config.js Impor ekstrak-css-chunks-webpack-plugin

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

webpack.config.js Tambahkan aturan css , Ekstrak potongan css terlebih dahulu kemudian css loader css-loader akan di-embed ke dalam dokumen html, pastikan css-loader dan ekstrak-css-chunks-webpack-plugin ada di package.json dev ketergantungan

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

webpack.config.js Buatlah contoh dari plugin

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

Dan sekarang mengimpor css dimungkinkan Dan sekarang di file tsx seperti index.tsx saya dapat menggunakan impor seperti ini import './Tree.css' di mana Tree.css berisi aturan css seperti

body {
    background: red;
}

Aplikasi saya menggunakan skrip ketikan dan ini berfungsi untuk saya, periksa repo saya untuk sumbernya: https://github.com/nickjohngray/staticbackeditor

nick
sumber
-2

Anda dapat mengimpor .cssfile Anda dalam .jsxfile

Ini contohnya -

import Content from '../content/content.jsx';
Saurabh Ramchandrarao Kulkarni
sumber