如何在React组件中导入CSS文件

89

我想将CSS文件导入React组件。

我已经尝试过，import disabledLink from "../../../public/styles/disabledLink";但是下面出现错误；

找不到模块：错误：无法解析c：\ Users \ User \ User \ Documents \ pizza-app \ client \ src \ components @中的“文件”或“目录” ../../../public/styles/disabledLink。 /client/src/components/ShoppingCartLink.js 19：20-66哈希：2d281bb98fe0a961f7c4版本：webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css 是我要加载的CSS文件的位置。

在我看来，导入似乎没有找到正确的路径。

我以为../../../它将开始查找上面三个文件夹层的路径。

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js 是应导入CSS文件的文件的位置。

我在做什么错，我该如何解决？

javascript reactjs relative-path

— 腹部
source

嘿，怎么了：D，它看起来像上面只有两个文件夹（components和src）

— Steeve Pitis16年

嘿，您是对的，但仍然无法正常工作。我注意到我不能使用导入，因为我不能在CSS文件中使用导出

— venter

使用这种方式stackoverflow.com/questions/39926493/…–

— anson

我收到错误-> @media only屏幕和（最小宽度：320px）和（最大宽度：640px）{^ SyntaxError：Module._compile（internal / modules / cjs / loader.js：723上的无效或意外令牌）：23）

— 萨达南德

150

如果您不需要：

例如

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

在此处查看完整示例（将JSX Live编译器构建为React组件）。

— code4jhon
source

4

对我不起作用，当我尝试使用babel寄存器运行mocha时，我得到... I：\ .... css：1（函数（导出，需要，模块，__ filename，__ dirname）{.filter-bg {^ SyntaxError：意外令牌

— 。– JGleason

3

或者，使用react-helmet并将css（如果它是URL）注入<head>标记中

— Kira

52

使用webpack创建捆绑包时需要使用css-loader。

安装它：

npm install css-loader --save-dev

并将其添加到您的webpack配置中的加载器中：

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

之后，您将能够在js中包含CSS文件。

— 亚历山大·拉扎列夫
source

1

我不允许将另一个模块导入该项目。他们的另一个解决方案仅适用于reactjs或本机js吗？

— 文特尔

所以我认为我必须使用这样的东西：HTMLElement.style

— venter

看起来有点难看。为什么不允许在捆绑包构建中添加更改？

— 亚历山德拉·拉扎列夫

这是一个关于reactjs的工作船的后处理程序，我们被告知使用工作船中包含的模块来解决要求

— venter

好的，但是只是想提一下，获取样式标签并没有像您在问题中所问的那样导入css文件。这是两个不同的问题。

— 亚历山德拉·拉扎列夫

31

我建议使用CSS模块：

反应

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

渲染组件：

<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）
source

我将在下面添加第1部分作为答案。您可以按照我的回答测试您的组件。

— 米希尔·帕特尔

2

如果尝试了一下，它是行不通的。我试着这样包含它：import styles from "./disabledLink.css";并得到以下错误：找不到模块：错误：无法解析'file'或'directory'./disabledLink.css in c：\ Users \ Basti Kluth \ Documents \ pizza-app 20-49：\客户\ SRC \部件@ ./client/src/components/ShoppingCartLink.js 19

— 腹面

1

css模块应分开安装，github.com

— Alexandr Lazarev

1

以及如何编写此类CSS的媒体查询，任何想法？

— Sonu Bamniya

18

以下内容将外部CSS文件导入React组件，并<head />在网站的中输出CSS规则。

安装样式加载器和CSS加载器：

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

在webpack.config.js中：

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

在组件文件中：

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

— Webars
source

我使用babel来运行观察程序。也许根本看不到webpack.config.js文件

— Anton

您安装了css-loader吗？我也看不到您的webpack.config.js。

— Webars'Mar

1

您可以以对象格式添加更多模块规则作为rules数组的值。

— Ari

3

上面的解决方案已完全更改和弃用。如果您想使用CSS模块（假设您导入了css-loaders），那么我已经尝试了很长时间了，最后找到了答案。默认的webpack加载器在新版本中有很大的不同。

在您的Webpack中，您需要找到一个以cssRegex开头的部分，并用它替换它；

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

— 乌古尔·伊尔马兹（Ugur Yilmaz）
source

stackoverflow.com/questions/53572200/… 替代解决方案

— Maulik Sakhida，

1

CSS模块使您可以在不同文件中使用相同的CSS类名称，而不必担心命名冲突。

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）
source

1

安装样式加载器和CSS加载器：

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

配置Webpack

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

— 贝特温·罗梅罗（Bertwin Romero）
source

0

如果您只想将样式表中的某些样式注入到组件中而不捆绑整个样式表，则建议使用https://github.com/glortho/styled-import。例如：

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

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

注意：我是这个库的作者，我为大量导入样式和CSS模块不是最佳或最可行的解决方案而构建了它。

— 格洛索
source

0

您也可以使用所需的模块。

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

— 胡安·纳瓦雷特（Juan Navarrete）
source

0

使用extract-css-chunks-webpack-plugin和css-loader loader对我有用，请参见以下内容：

webpack.config.js导入extract-css-chunks-webpack-plugin

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

webpack.config.js添加css规则，首先提取css块，然后css加载器css-loader将它们嵌入到html文档中，确保css-loader和extract-css-chunks-webpack-plugin位于package.json dev中依存关系

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

webpack.config.js制作插件实例

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

现在可以导入css 现在，在index.tsx这样的tsx文件中，我可以使用import这样的import'./Tree.css'，其中Tree.css包含css规则，例如

body {
    background: red;
}

我的应用程序正在使用打字稿，这对我有用，请检查我的回购源：https : //github.com/nickjohngray/staticbackeditor

— 缺口
source

-2

您可以在.css文件中导入.jsx文件

这是一个例子-

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

— 索拉（Saurabh Ramchandrarao Kulkarni）
source