当前位置: 首页 > 知识库问答 >
问题:

如何在React Component中导入CSS文件

阴鸿才
2023-03-14

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

我已经尝试导入disabledLink从".../.../.../公共/样式/disabledLink";但我得到下面的错误;

找不到模块:错误:无法解析文件或目录.../.../.../Public/style/disabledLink in c:\用户\用户\文档\pisa-app\Client\src\组件@./Client/src/组件/ShoppingCartLink.js19:20-66哈希: 2d281bb98fe0a961f7c4版本: webpack 1.13.2

C:\Users\User\Documents\pizza app\client\public\style\disabledLink。css是我试图加载的css文件的位置。

在我看来,import似乎没有找到正确的路径。

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

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

我做错了什么?我该如何修复它?

共有3个答案

堵昊焱
2023-03-14

我建议使用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>
商飞尘
2023-03-14

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

安装它:

npm install css-loader --save-dev

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

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

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

卫彭亮
2023-03-14

如果不需要,您甚至不需要命名:

例如

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

请参阅此处的完整示例(将JSX Live编译器构建为React组件)。

 类似资料:
  • 问题内容: 我想将CSS文件导入React组件。 我已经尝试过,但是下面出现错误; 找不到模块:错误:无法解析c:\ Users \ User \ User \ Documents \ pizza-app \ client \ src \ components @中的“文件”或“目录” ../../../public/styles/disabledLink。 /client/src/compone

  • 我正在使用一个我只能访问CSS文件的CMS。所以,我不能在

  • 问题内容: 我正在尝试像这样使用react-day-pickers组件,但是我不知道如何导入.css文件,并且不断收到错误: 我已经安装了package.json,这是我的Calender.jsx文件: 这是我的webpack.config.js: 问题答案: 您如何编译呢?如果是webpack,则可能需要引入样式加载器,并在webpack配置中的数组中包含以下内容: 更新 :现在提供了webpa

  • 问题内容: 无论如何,是否可以使用Sass的命令导入常规CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的合并/压缩功能,并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它 问题答案: 对于libsass(C / C ++实现),导入的工作方式与文件相同-只是省略扩展名: 这将导入。

  • 本文向大家介绍如何在Oracle中导入dmp文件,包括了如何在Oracle中导入dmp文件的使用技巧和注意事项,需要的朋友参考一下 项目开始拿到了dmp文件,数据库用的是10g的,但是尽然没导成功,后来想可能导出的时候用11导出的,决定试一下。 正好自己的机器是11的客户端,结果不识别imp命令,到安装目录下的bin文件夹下看尽然没有imp执行文件。可能装客户端的时候没选管理者装。 怎么办呢,从别

  • 我正在尝试使用renderToStaticMarkup方法从react生成静态html。我现在面临的问题是,我无法将css导入react组件。我想在我的React组件中导入css,比如css模块(从“./style.css”导入样式)。然后将加载的css注入生成的静态html头部。我怎样才能做到这一点? 另外,由于一些限制,我无法使用webpack。如果有任何巴贝尔插件可用于此特定情况,那么请让我