Come importare un file CSS in un componente React

98

Voglio importare un file CSS in un componente React.

Ho provato import disabledLink from "../../../public/styles/disabledLink";ma ottengo l'errore qui sotto;

Modulo non trovato: Errore: Impossibile risolvere "file" o "directory" ../../../public/styles/disabledLink in c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Versione: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css è la posizione del file CSS che sto cercando di caricare.

A me sembra che l'importazione non stia cercando il percorso corretto.

Ho pensato che con ../../../esso avrebbe iniziato a cercare il percorso tre livelli di cartelle sopra.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js è la posizione del file che dovrebbe importare il file CSS.

Cosa sto facendo di sbagliato e come posso risolverlo?

javascript reactjs relative-path

— venter
fonte

Ehi come va: D, sembra che solo due cartelle sopra (componenti e src)

— Steeve Pitis

Ehi, hai ragione, ma ancora non funziona. Ho notato che non posso usare l'importazione, perché non posso usare l'esportazione all'interno di un file CSS

— venter

utilizzando questo modo stackoverflow.com/questions/39926493/...

— Anson

Ricevo un errore -> @media only screen e (min-width: 320px) e (max-width: 640px) {^ SyntaxError: token non valido o imprevisto su Module._compile (internal / modules / cjs / loader.js: 723 : 23)

— Sadanand

159

Non devi nemmeno nominarlo se non hai bisogno di:

per esempio

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

guarda un esempio completo qui ( Costruisci un compilatore JSX Live come componente React ).

— code4jhon
fonte

5

Non funziona per me, quando provo a eseguire mocha con babel register ottengo ... I: \ .... css: 1 (function (export, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError: token imprevisto.

— JGleason

3

In alternativa, usa il casco React e inserisci il CSS (se è un URL) nel tag <head>

— Kira

53

È necessario utilizzare css-loader durante la creazione di bundle con webpack.

Installalo:

npm install css-loader --save-dev

E aggiungilo ai caricatori nelle configurazioni del tuo webpack:

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

Dopo questo, sarai in grado di includere file css in js.

— Alexandr Lazarev
fonte

1

Non sono autorizzato a importare un altro modulo in questo progetto. La loro altra soluzione funziona solo con reactjs o native js?

— venter

Quindi penso di dover usare qualcosa del genere: HTMLElement.style

— venter

Sembra un po 'brutto. Perché non sei autorizzato ad aggiungere modifiche nella creazione di bundle?

— Alexandr Lazarev

È un postprocessing per un workhip su reactjs e ci viene detto di risolvere i requisiti con i moduli inclusi durante il workhip

— venter

Ok, ma volevo solo menzionare che il recupero dei tag di stile non importa i file css come hai chiesto nella tua domanda. Questi sono 2 problemi diversi.

— Alexandr Lazarev

32

Suggerirei di utilizzare i moduli CSS:

Reagire

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

Rendering del componente:

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

Aggiungerei la parte 1 come risposta di seguito. E puoi seguire la mia risposta per testare il tuo componente.

— Mihir Patel

2

Se lo provi e non funziona. Ho provato a includerlo in questo modo: import styles from "./disabledLink.css";e ho ricevuto il seguente errore: Modulo non trovato: Errore: Impossibile risolvere 'file' o 'directory' ./disabledLink.css in c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49

— venter

1

i moduli CSS dovrebbero essere installati separatamente, github.com/css-modules/css-modules

— Alexandr Lazarev

1

E come posso scrivere media query per questo tipo di CSS, qualsiasi idea?

— Sonu Bamniya

18

Quanto segue importa un file CSS esterno in un componente React e restituisce le regole CSS nel <head />sito web.

Installa Style Loader e CSS Loader :

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

In webpack.config.js:

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

In un file componente:

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

— Webar
fonte

E io uso Babel per eseguire watcher. Forse non vede affatto nel file webpack.config.js

— Anton Danilchenko

Hai installato css-loader? Inoltre non vedo il tuo webpack.config.js.

— Webars

1

È possibile aggiungere più regole del modulo in formato oggetto come rulesvalore dell'array.

— Ari

4

Le soluzioni di cui sopra sono state completamente modificate e deprecate. Se vuoi usare moduli CSS (supponendo che tu abbia importato css-loader) e ho cercato di trovare una risposta per questo per così tanto tempo e alla fine l'ho fatto. Il caricatore webpack predefinito è abbastanza diverso nella nuova versione.

Nel tuo webpack, devi trovare una parte che inizia con cssRegex e sostituirla con questa;

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

— Ugur Yilmaz
fonte

stackoverflow.com/questions/53572200/... Soluzione alternativa

— Maulik Sakhida

2

I moduli CSS ti consentono di utilizzare lo stesso nome di classe CSS in file diversi senza preoccuparti dei conflitti di nome.

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
fonte

1

Installa Style Loader e CSS Loader:

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

Configura webpack

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

— Bertwin Romero
fonte

0

Nei casi in cui desideri semplicemente iniettare alcuni stili da un foglio di stile in un componente senza raggrupparli nell'intero foglio di stile, ti consiglio https://github.com/glortho/styled-import . Per esempio:

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

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

NOTA: sono l'autore di questa libreria e l'ho creata per i casi in cui le importazioni di massa di stili e moduli CSS non sono la soluzione migliore o più praticabile.

— glortho
fonte

0

È inoltre possibile utilizzare il modulo richiesto.

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

— Juan Navarrete
fonte

0

L'utilizzo di extract-css-chunks-webpack-plugin e css-loader loader funziona per me, vedi sotto:

webpack.config.js Importa extract-css-chunks-webpack-plugin

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

webpack.config.js Aggiungi la regola css , estrai prima i pezzi css, quindi il caricatore css css-loader li incorporerà nel documento html, assicurati che css-loader ed extract-css-chunks-webpack-plugin siano nel package.json dev dipendenze

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

webpack.config.js Crea istanza del plugin

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

E ora è possibile importare css E ora in un file tsx come index.tsx posso usare import come questo import './Tree.css' dove Tree.css contiene regole css come

body {
    background: red;
}

La mia app utilizza il dattiloscritto e questo funziona per me, controlla il mio repository per la fonte: https://github.com/nickjohngray/staticbackeditor

— nick
fonte

-2

Puoi importare il tuo .cssfile in .jsxfile

Ecco un esempio:

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

— Saurabh Ramchandrarao Kulkarni
fonte