Cómo importar un archivo CSS en un componente React

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?

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 ).

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.

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>

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

2. En webpack.config.js:

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

3. En un archivo de componentes:

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

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]'
  }),
}

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

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]'
                   }
               }
           ]
       }
   

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.

También puede utilizar el módulo requerido.

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

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

Puede importar su .cssarchivo en .jsxarchivo

Aquí hay un ejemplo -

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