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

Posted 2023-02-22

技术标签:

【中文标题】如何在 React 组件中导入 CSS 文件【英文标题】：How to import a CSS file in a React Component 【发布时间】：2017-02-12 16:46:42 【问题描述】：

我想将 CSS 文件导入到 react 组件中。

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

找不到模块：错误：无法解析 c:\Users\User\Documents\pizza-app\client\src\ 中的“文件”或“目录”../../../public/styles/disabledLink components@./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 文件的文件的位置。

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

【问题讨论】：

嘿，怎么了 :D，看起来上面只有两个文件夹（组件和 src）嘿，你是对的，但它仍然不起作用。我注意到我不能使用导入，因为我不能在 CSS 文件中使用导出这样使用***.com/questions/39926493/… 我收到错误 -> @media only screen and (min-width:320px) and (max-width:640px) ^ SyntaxError: Invalid or unexpected token at Module._compile (internal/modules /cjs/loader.js:723:23) 【参考方案1】：

我建议使用 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>

【讨论】：

我会在下面添加第 1 部分作为答案。你可以按照我的回答来测试你的组件。如果试过了，但它不起作用。我尝试像这样包含它：import styles from "./disabledLink.css"; 并得到以下错误：找不到模块：错误：无法解析 c:\Users\Basti Kluth\Documents\ 中的“文件”或“目录”./disabledLink.css Pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-49 css模块应该分开安装，github.com/css-modules/css-modules 我该如何为这种类型的 CSS 编写媒体查询，有什么想法吗？【参考方案2】：

使用 webpack 创建 bundle 时需要使用 css-loader。

安装它：

npm install css-loader --save-dev

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

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

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

【讨论】：

我不允许将另一个模块导入这个项目。他们的另一种解决方案是否仅适用于 reactjs 或原生 js？所以我想我必须使用这样的东西：htmlElement.style 看起来有点难看。为什么不允许在捆绑包构建中添加更改？这是一个关于reactjs的workship的后处理，我们被告知用workship期间包含的模块来解决需求好的，但只是想提一下，获取样式标签不是 importing css 文件，正如您在问题中所问的那样。这是两个不同的问题。【参考方案3】：

如果你不需要，你甚至不必命名它：

例如

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

在此处查看完整示例 (Build a JSX Live Compiler as a React Component)。

【讨论】：

对我不起作用，当我尝试使用 babel register 运行 mocha 时，我得到... I:\....css:1 (function (exports, require, module, __filename, __dirname ) .filter-bg ^ SyntaxError: Unexpected token . 或者，使用 react-helmet 并在标签中注入 css（如果它是 url）【参考方案4】：

下面在 React 组件中导入一个外部 CSS 文件，并在网站的<head /> 中输出 CSS 规则。

安装Style Loader和CSS Loader：

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

【讨论】：

我使用 babel 来运行 watcher。也许它根本看不到 webpack.config.js 文件你安装css-loader了吗？我也没有看到你的 webpack.config.js。您可以添加更多对象格式的模块规则作为rules数组的值。【参考方案5】：

安装样式加载器和 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]'
                
            
        ]

【讨论】：

【参考方案6】：

如果您只想将样式表中的一些样式注入组件而不捆绑整个样式表，我推荐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 模块不是最佳或最可行的解决方案的情况构建了它。

【讨论】：

【参考方案7】：

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

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

【讨论】：

【参考方案8】：

上述解决方案已完全更改和弃用。如果您想使用 CSS 模块（假设您导入了 css-loaders）并且我一直试图为此找到答案很长时间，最终做到了。新版本中默认的 webpack loader 完全不同。

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


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

【讨论】：

***.com/questions/53572200/… 替代解决方案【参考方案9】：

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

这是一个例子-

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

【讨论】：

【参考方案10】：

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

【讨论】：

我们需要做些什么来让它工作吗？ @AbhishekSharma..关于解决方案最重要的一点是，将您的 css 文件命名为 "something.module.css" 。该模块部分是使它工作的全部。【参考方案11】：

使用 extract-css-chunks-webpack-plugin 和 css-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 开发依赖项中

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 规则，如