Como importar um arquivo CSS em um componente React

98

Quero importar um arquivo CSS para um componente react.

Já tentei, import disabledLink from "../../../public/styles/disabledLink";mas recebo o erro abaixo;

Módulo não encontrado: Erro: Não é possível resolver 'arquivo' ou 'diretório' ../../../public/styles/disabledLink em c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Versão: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css é a localização do arquivo CSS que estou tentando carregar.

Para mim, parece que a importação não está procurando o caminho correto.

Achei que com ../../../isso começaria a procurar o caminho três camadas de pastas acima.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js é a localização do arquivo que deve importar o arquivo CSS.

O que estou fazendo de errado e como posso consertar?

javascript reactjs relative-path ventre
fonte
Ei, e aí: D, parece que apenas duas pastas acima (componentes e src)
Steeve Pitis,
Ei, você está certo, mas ainda não funciona. Percebi que não consigo usar o import, porque não consigo usar o export dentro de um arquivo CSS
venter
usando desta forma stackoverflow.com/questions/39926493/…
anson
Estou recebendo um erro -> @media only screen e (min-width: 320px) e (max-width: 640px) {^ SyntaxError: token inválido ou inesperado em Module._compile (internal / modules / cjs / loader.js: 723 : 23)
Sadan

Respostas:

159

Você nem mesmo precisa nomeá-lo se não precisar:

por exemplo

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

veja um exemplo completo aqui ( Construa um JSX Live Compiler como um Componente React ).

code4jhon
fonte
5
Não funciona para mim, quando tento executar o mocha com o babel register, recebo ... I: \ .... css: 1 (função (exporta, requer, módulo, __filename, __dirname) {.filter-bg {^ SyntaxError: Token inesperado.
JGleason
3
Ou use o capacete de reação e injete o css (se for um url) na tag <head>
Kira
53

Você precisa usar css-loader ao criar bundle com webpack.

Instale-o:

npm install css-loader --save-dev

E adicione-o aos carregadores nas configurações do seu webpack: 

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

Depois disso, você poderá incluir arquivos css em js.

Alexandr Lazarev
fonte
1
Não tenho permissão para importar outro módulo para este projeto. A outra solução deles está funcionando apenas com reactjs ou js nativo?
venter
Então eu acho que tenho que usar algo assim: HTMLElement.style
venter
Parece um pouco feio. Por que você não tem permissão para adicionar mudanças na construção do pacote?
Alexandr Lazarev
É um pós-processamento para um workhip sobre reactjs e somos informados para resolver os requisitos com os módulos incluídos durante o workhip
ventre
Ok, mas só queria mencionar que buscar tags de estilo não está importando arquivos css como você perguntou em sua pergunta. São 2 questões diferentes.
Alexandr Lazarev,
32

Eu sugeriria o uso de módulos CSS:

Reagir

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 o 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
Eu adicionaria a parte 1 como a resposta abaixo. E você pode seguir minha resposta para testar seu componente.
Mihir Patel
2
Se tentasse fazer isso e não funcionasse. Tentei incluí-lo assim: import styles from "./disabledLink.css";e obtive o seguinte erro: Módulo não encontrado: Erro: Não é possível resolver 'arquivo' ou 'diretório' ./disabledLink.css em c: \ Usuários \ Basti Kluth \ Documentos \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49
venter
1
os módulos css devem ser instalados separadamente, github.com/css-modules/css-modules
Alexandr Lazarev
1
E como posso escrever consulta de mídia para esse tipo de CSS, qualquer ideia?
Sonu Bamniya
18

O seguinte importa um arquivo CSS externo em um componente React e gera as regras CSS no <head />do site.

  1. Instale o Style Loader e o CSS Loader :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. Em webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. Em um arquivo de componente:
import './path/to/file.css';
Webars
fonte
E eu uso o babel para executar o observador. Talvez ele não veja o arquivo webpack.config.js
Anton Danilchenko
Você instalou o css-loader? Além disso, não estou vendo seu webpack.config.js.
Webars
1
Você pode adicionar mais regras de módulo no formato de objeto como ruleso valor da matriz.
Ari de
4

As soluções acima foram completamente alteradas e obsoletas. Se você quiser usar módulos CSS (presumindo que você importou css-loaders) e eu venho tentando encontrar uma resposta para isso há muito tempo e finalmente consegui. O carregador do webpack padrão é bastante diferente na nova versão.

Em seu webpack, você precisa encontrar uma parte começando com cssRegex e substituí-la por esta;

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}
Ugur Yilmaz
fonte
stackoverflow.com/questions/53572200/… Solução alternativa
Maulik Sakhida
2

Os módulos CSS permitem que você use o mesmo nome de classe CSS em arquivos diferentes sem se preocupar com conflitos de nomes.

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

  1. Instale o Style Loader e o CSS Loader:

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

  2. Configurar 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

Nos casos em que você deseja apenas injetar alguns estilos de uma folha de estilo em um componente sem empacotar em toda a folha de estilo, recomendo https://github.com/glortho/styled-import . Por exemplo:

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

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

NOTA: Eu sou o autor desta biblioteca, e eu a construí para casos em que as importações em massa de estilos e módulos CSS não são a melhor ou a solução mais viável.

Glortho
fonte
0

Você também pode usar o módulo necessário.

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

O uso de extract-css-chunks-webpack-plugin e carregador css-loader funciona para mim, veja abaixo:

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

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

webpack.config.js Adicione a regra css , Extraia pedaços css primeiro, em seguida, o css loader css-loader irá incorporá-los ao documento html, certifique-se de que css-loader e extract-css-chunks-webpack-plugin estão em package.json dev dependências

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

webpack.config.js Faça instância do plugin

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

E agora a importação de css é possível E agora em um arquivo tsx como index.tsx eu posso usar a importação como esta importação './Tree.css' onde Tree.css contém regras de css como

body {
    background: red;
}

Meu aplicativo está usando texto digitado e isso funciona para mim, verifique meu repositório para obter a fonte: https://github.com/nickjohngray/staticbackeditor

usuario
fonte
-2

Você pode importar seu .cssarquivo no .jsxarquivo

Aqui está um exemplo -

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