React Bileşeninde bir CSS dosyası nasıl içe aktarılır

98

Bir CSS dosyasını bir react bileşenine aktarmak istiyorum.

Denedim import disabledLink from "../../../public/styles/disabledLink";ama aşağıdaki hatayı alıyorum;

Modül bulunamadı: Hata: c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @ içindeki ../../../public/styles/disabledLink 'dosya' veya 'dizin' çözümlenemiyor. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Sürüm: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css yüklemeye çalıştığım CSS dosyasının konumudur.

Bana göre, içe aktarma doğru yolu aramıyor gibi görünüyor.

Bununla birlikte ../../../, yukarıdaki üç klasör katmanını aramaya başlayacağını düşündüm .

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js CSS dosyasını içe aktarması gereken dosyanın konumudur.

Neyi yanlış yapıyorum ve bunu nasıl düzeltebilirim?

javascript reactjs relative-path

— Venter
kaynak

Hey naber: D, yukarıda sadece iki klasör gibi görünüyor (bileşenler ve src)

— Steeve Pitis

Hey, haklısın ama hala işe yaramıyor. Bir CSS dosyası içinde dışa

— aktarmayı

bu şekilde kullanmak stackoverflow.com/questions/39926493/…

— anson

Hata alıyorum -> yalnızca @media ekranı ve (min-width: 320px) ve (max-width: 640px) {^ SyntaxError: Module._compile'da geçersiz veya beklenmeyen belirteç (dahili / module / cjs / loader.js: 723 : 23)

— Sadanand

159

İhtiyacınız yoksa bir isim vermek zorunda bile değilsiniz:

Örneğin

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

burada eksiksiz bir örneğe bakın ( React Bileşeni olarak JSX Live Compiler oluşturun ).

— code4jhon
kaynak

5

Benim için çalışmıyor, babel register ile mocha çalıştırmayı denediğimde ... I: \ .... css: 1 (function (export, require, module, __filename, __dirname) {.filter-bg {^

— Sözdizimi Hatası

3

Veya, react-helmet kullanın ve css'i (eğer bir url'si ise) <head> etiketine enjekte edin

— Kira

53

Webpack ile paket oluştururken css-loader kullanmanız gerekir .

Yükle:

npm install css-loader --save-dev

Ve bunu web paketi yapılandırmalarınızdaki yükleyicilere ekleyin:

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

Bundan sonra, css dosyalarını js'ye dahil edebileceksiniz.

— Alexandr Lazarev
kaynak

1

Bu projeye başka bir modül aktarmama izin verilmiyor. Başka bir çözümü yalnızca reactjs veya yerel js ile mi çalışıyor?

— venter

HTMLElement.style: bence Yani böyle bir şey kullanmak zorunda

— Alt taraf

Biraz çirkin görünüyor. Grup oluşturmaya neden değişiklik eklemenize izin verilmiyor?

— Alexandr Lazarev

Bu reactjs hakkında işlikte için işlem sonrası ve biz işlikte sırasında dahil modülleri ile gereksinimlerini çözmek için söyleneni

— venter

Tamam, ancak stil etiketlerini getirmenin, sorunuzda sorduğunuz gibi css dosyalarını içe aktarmadığını belirtmek istedim . Bunlar 2 farklı konu.

— Alexandr Lazarev

32

CSS Modüllerini kullanmanızı öneririm:

Tepki

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

Bileşeni Oluşturma:

<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
kaynak

Aşağıdaki cevap olarak 1. bölümü ekleyeceğim. Ve bileşeninizi test etmek için cevabımı takip edebilirsiniz.

— Mihir Patel

2

Bunu denediyseniz ve işe yaramazsa. Bunu şu şekilde eklemeye çalıştım: import styles from "./disabledLink.css";ve aşağıdaki hatayı alıyorum: Modül bulunamadı: Hata: c: \ Users \ Basti Kluth \ Documents \ pizza-app içinde 'dosya' veya 'dizin' ./disabledLink.css çözülemiyor ./client/src/components/ShoppingCartLink.js 19 @ \ client \ src \ bileşenleri: 20-49

— Alt taraf

1

css modülleri ayrı olarak kurulmalıdır, github.com/css-modules/css-modules

— Alexandr Lazarev

1

Ve bu tür CSS, herhangi bir Fikir için medya sorgusu nasıl yazabilirim?

— Sonu Bamniya

18

Aşağıdakiler, bir React bileşenindeki harici bir CSS dosyasını içe aktarır <head />ve web sitesinin CSS kurallarını çıkarır .

Stil Yükleyiciyi ve CSS Yükleyiciyi yükleyin :

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

Webpack.config.js'de:

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

Bir bileşen dosyasında:

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

— Webarları
kaynak

Watcher'ı çalıştırmak için babel kullanıyorum. Belki webpack.config.js dosyasını hiç görmüyor

— Anton Danilchenko

Css-loader yüklediniz mi? Ayrıca webpack.config.js dosyanızı göremiyorum.

— Webars

1

rulesDizi değeri olarak nesne biçiminde daha fazla modül kuralı ekleyebilirsiniz .

— Ari

4

Yukarıdaki çözümler tamamen değiştirildi ve kullanımdan kaldırıldı. CSS modüllerini kullanmak istiyorsanız (css yükleyicilerini içe aktardığınızı varsayarsak) ve bunun için çok uzun süredir bir cevap bulmaya çalışıyordum ve sonunda yaptım. Varsayılan web paketi yükleyici, yeni sürümde oldukça farklıdır.

Web paketinizde cssRegex ile başlayan bir parça bulmanız ve bununla değiştirmeniz gerekir;

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

— Uğur Yılmaz
kaynak

stackoverflow.com/questions/53572200/… Alternatif çözüm

— Maulik Sakhida

2

CSS Modülleri, ad çatışmaları konusunda endişelenmeden farklı dosyalarda aynı CSS sınıf adını kullanmanıza izin verir.

Button.module.css

.error {
  background-color: red;
}

başka-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
kaynak

1

Stil Yükleyiciyi ve CSS Yükleyiciyi yükleyin:

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

Web paketini yapılandırın

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

— Bertwin Romero
kaynak

0

Bir stil sayfasından bazı stilleri tüm stil sayfasında bir araya getirmeden bir bileşene enjekte etmek istediğiniz durumlarda https://github.com/glortho/styled-import'u öneririm . Örneğin:

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

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

NOT: Bu kitaplığın yazarıyım ve stillerin ve CSS modüllerinin toplu aktarımlarının en iyi veya en uygun çözüm olmadığı durumlar için oluşturdum.

— Glortho
kaynak

0

Ayrıca gerekli modülü de kullanabilirsiniz.

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

— Juan Navarrete
kaynak

0

Extract-css-chunks-webpack-plugin ve css-loader yükleyiciyi kullanmak benim için çalışıyor, aşağıya bakın:

webpack.config.js Import extract-css-chunks-webpack-eklentisini içe aktarın

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

webpack.config.js css kuralını ekleyin, önce css Parçalarını Çıkarın, ardından css yükleyici bunları html belgesine gömer, css-yükleyici ve extract-css-chunks-webpack-eklentisinin package.json dev içinde olduğundan emin olun bağımlılıklar

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

webpack.config.js Eklentinin örneğini oluşturun

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

Ve şimdi css içe aktarmak mümkün Ve şimdi index.tsx gibi bir tsx dosyasında, Tree.css'nin aşağıdaki gibi css kurallarını içerdiği './Tree.css' gibi içe aktarmayı kullanabilirim.

body {
    background: red;
}

Uygulamam typcript kullanıyor ve bu benim için çalışıyor, kaynak için depomu kontrol edin: https://github.com/nickjohngray/staticbackeditor

— Nick
kaynak

-2

Eğer alabilirsiniz .cssdosyayı .jsxdosyası

İşte bir örnek -

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

— Saurabh Ramchandrarao Kulkarni
kaynak