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

IT技术 javascript reactjs relative-path
2021-01-24 13:25:14

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

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

找不到module：错误：无法解析 c:\Users\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 文件的文件的位置。

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

6个回答

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

例如

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

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

对我不起作用，当我尝试使用 babel register 运行 mocha 时，我得到... I:\....css:1 (function (exports, require, module, __filename, __dirname) { .filter-bg { ^语法错误：意外标记。
2021-03-23 13:25:14
或者，使用 react-helmet 并在 <head> 标签中注入 css（如果它是一个 url）
2021-04-04 13:25:14

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

安装它：

npm install css-loader --save-dev

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

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

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

我不允许将另一个module导入到这个项目中。他们的另一种解决方案是否仅适用于 reactjs 或原生 js？
2021-03-18 13:25:14
这是一个关于reactjs的workship的后处理，我们被告知用workship中包含的module解决需求
2021-03-23 13:25:14
好的，但只是想提一下，获取样式标签并没有像您在问题中提出的那样导入css 文件。这是两个不同的问题。
2021-04-03 13:25:14
所以我想我必须使用这样的东西：HTMLElement.style
2021-04-05 13:25:14
它看起来有点丑。为什么不允许在构建包中添加更改？
2021-04-10 13:25:14

我建议使用 CSS module：

react

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 部分作为下面的答案。您可以按照我的回答来测试您的组件。
2021-03-17 13:25:14
css module应该分开安装，github.com/ css-modules/css-modules
2021-03-24 13:25:14
如果试过了，它不起作用。我试图像这样包含它：import styles from "./disabledLink.css";并得到以下错误：找不到module：错误：无法解析 'file' 或 'directory' ./disabledLink.css in c:\Users\Basti Kluth\Documents\pizza-app \client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-49
2021-04-04 13:25:14
我怎样才能为这种类型的 CSS 编写媒体查询，有什么想法吗？
2021-04-07 13:25:14

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

  1. 安装样式加载器和CSS 加载器：
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. 在 webpack.config.js 中：
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. 在组件文件中：
import './path/to/file.css';
你安装了 css-loader 吗？我也没有看到你的 webpack.config.js。
2021-03-20 13:25:14
我使用 babel 来运行 watcher。也许它根本看不到 webpack.config.js 文件
2021-04-01 13:25:14
您可以以对象格式添加更多module规则作为rules数组的值。
2021-04-13 13:25:14

上述解决方案已完全更改和弃用。如果您想使用 CSS module（假设您导入了 css-loaders），那么我一直在尝试为此寻找答案很长时间，终于做到了。默认的 webpack 加载器在新版本中完全不同。

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

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}
2021-03-22 13:25:14
其它你可能感兴趣的问题
上一篇在 if 条件语句中分配变量，好的做法与否？ 下一篇AJAX POST 和加号 (+)——如何编码？