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

【问题标题】：How to import a CSS file in a React Component如何在 React 组件中导入 CSS 文件
【发布时间】：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 文件中使用导出
这样使用stackoverflow.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)

标签： javascript reactjs relative-path

【解决方案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]'
  }),
}

【讨论】：

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

body {
    background: red;
}

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

【讨论】：

【解决方案12】：

如果 css 文件位于要导入的同一文件夹中，则可以导入 css 文件，而不是简单地试试这个

导入'./styles.css'

如果 css 文件远离我们导航文件所在位置的组件并像这样使用它

导入'../mainstyles/styles.css'

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。