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

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.

Instale Style Loader y CSS Loader :

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

En webpack.config.js:

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

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

Instale Style Loader y CSS Loader:

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

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