Cómo importar un archivo CSS en un componente React

89

Quiero importar un archivo CSS en un componente de reacción.

Lo intenté import disabledLink from "../../../public/styles/disabledLink";pero aparece el siguiente error;

Módulo no encontrado: Error: No se puede resolver 'archivo' o 'directorio' ../../../public/styles/disabledLink en c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Versión: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css es la ubicación del archivo CSS que estoy intentando cargar.

Para mí, parece que la importación no está buscando la ruta correcta.

Pensé que con ../../../él comenzaría a buscar la ruta tres capas de carpeta arriba.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js es la ubicación del archivo que debe importar el archivo CSS.

¿Qué estoy haciendo mal y cómo puedo solucionarlo?

javascript reactjs relative-path venter
fuente
Hola, ¿qué pasa? D, parece que solo hay dos carpetas arriba (componentes y src)
Steeve Pitis
Oye, tienes razón, pero aún así no funciona. Noté que no puedo usar la importación, porque no puedo usar la exportación dentro de un archivo CSS
venter
usando de esta manera stackoverflow.com/questions/39926493/…
anson
Recibo un error -> @media only screen y (min-width: 320px) and (max-width: 640px) {^ SyntaxError: Token no válido o inesperado en Module._compile (internal / modules / cjs / loader.js: 723 : 23)
Sádan y

Respuestas:

150

Ni siquiera tiene que nombrarlo si no necesita:

p.ej

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

vea un ejemplo completo aquí ( Cree un compilador JSX Live como un componente React ).

code4jhon
fuente
4
No funciona para mí, cuando intento ejecutar mocha con el registro de babel, obtengo ... I: \ .... css: 1 (function (export, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError: Token inesperado.
JGleason
3
O use react-helmet e inyecte el CSS (si es una URL) en la etiqueta <head>
Kira
52

Debe usar css-loader al crear un paquete con webpack.

Instalarlo:

npm install css-loader --save-dev

Y agréguelo a los cargadores en las configuraciones de su paquete web: 

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

Después de esto, podrá incluir archivos css en js.

Alexandr Lazarev
fuente
1
No puedo importar otro módulo a este proyecto. ¿Su otra solución solo funciona con reactjs o js nativos?
viernes
Así que creo que tengo que usar algo como esto: HTMLElement.style
venter
Se ve un poco feo. ¿Por qué no puede agregar cambios en la creación de paquetes?
Alexandr Lazarev
Es un post-procesamiento para un cultual sobre reactjs y se nos dice para resolver los requisitos con los módulos incluidos en cultual
Venter
De acuerdo, pero solo quería mencionar que la obtención de etiquetas de estilo no está importando archivos css como lo hizo en su pregunta. Estos son 2 problemas diferentes.
Alexandr Lazarev
31

Sugeriría usar módulos CSS:

Reaccionar

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

Renderizando el 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
fuente
Agregaría la parte 1 como la respuesta a continuación. Y puede seguir mi respuesta para probar su componente.
Mihir Patel
2
Si probé esto y no funciona. Intenté incluirlo de esta manera: import styles from "./disabledLink.css";y obtengo el siguiente error: Módulo no encontrado: Error: No se puede resolver 'archivo' o 'directorio' ./disabledLink.css en c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49
venter
1
Los módulos css deben instalarse aparte, github.com/css-modules/css-modules
Alexandr Lazarev
1
¿Y cómo puedo escribir consultas de medios para ese tipo de CSS, cualquier idea?
Sonu Bamniya
18

Lo siguiente importa un archivo CSS externo en un componente React y genera las reglas CSS en <head />el sitio web.

  1. Instale Style Loader y CSS Loader :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. En webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. En un archivo de componentes:
import './path/to/file.css';
Webars
fuente
Y uso babel para ejecutar watcher. Tal vez no se vea en el archivo webpack.config.js en absoluto
Anton Danilchenko
¿Ha instalado css-loader? Además, no veo su webpack.config.js.
Webars
1
Puede agregar más reglas de módulo en formato de objeto como rulesvalor de matriz.
Ari
3

Las soluciones anteriores están completamente cambiadas y obsoletas. Si desea utilizar módulos CSS (suponiendo que haya importado css-loaders) y he estado tratando de encontrar una respuesta para esto durante tanto tiempo y finalmente lo hice. El cargador de paquetes web predeterminado es bastante diferente en la nueva versión.

En su paquete web, debe encontrar una parte que comience con cssRegex y reemplazarla por esta;

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

Los módulos CSS le permiten usar el mismo nombre de clase CSS en diferentes archivos sin preocuparse por los conflictos de nombres.

Button.module.css

.error {
  background-color: red;
}

otra hoja de estilo.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
fuente
1

  1. Instale Style Loader y CSS Loader:

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

  2. Configurar paquete web

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

En los casos en los que solo desee inyectar algunos estilos de una hoja de estilo en un componente sin incluir toda la hoja de estilo, le recomiendo https://github.com/glortho/styled-import . Por ejemplo:

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

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

NOTA: Soy el autor de esta biblioteca y la construí para casos en los que las importaciones masivas de estilos y módulos CSS no son la mejor o la más viable solución.

glortho
fuente
0

También puede utilizar el módulo requerido.

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

El uso de extract-css-chunks-webpack-plugin y css-loader loader funciona para mí, ver a continuación:

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

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

webpack.config.js Agregue la regla css , extraiga los fragmentos de css primero, luego el cargador de css css-loader los incrustará en el documento html, asegúrese de que css-loader y extract-css-chunks-webpack-plugin estén en el package.json dev dependencias

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

webpack.config.js Crear instancia del complemento

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

Y ahora es posible importar css.Y ahora, en un archivo tsx como index.tsx, puedo usar la importación como esta importación './Tree.css' donde Tree.css contiene reglas css como

body {
    background: red;
}

Mi aplicación está usando mecanografiado y esto funciona para mí, verifique mi repositorio para la fuente: https://github.com/nickjohngray/staticbackeditor

mella
fuente
-2

Puede importar su .cssarchivo en .jsxarchivo

Aquí hay un ejemplo -

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