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

我想导入一个 CSS 文件到一个反应组件。

我想导入一个 CSS 文件到一个反应组件。

我试过import disabledLink from "../../../public/styles/disabledLink";,但我得到下面的错误;

找不到模块:错误:无法解析“文件”或“目录”../../../ public / styles / disabledLink in c:\ Users\ User\ Documents\ Pizza-app\ client\ src\ components @./ client / src / components / ShoppingCartLink.js 19:20-66 哈希:2d281bbb98

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

对我来说,似乎进口不查找正确的路径。

我想与../../../它会开始查找上面的三个文件夹层的路径。

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

我做错了什么,我该如何解决?

244

你甚至不需要命名它,如果你不需要:

例如

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

请参见此处的完整示例(Build a JSX Live Compiler as a React Component)。

64

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

安装它:

npm install css-loader --save-dev

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

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

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

49

我建议使用 CSS 模块:

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

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

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

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(553)
如何在typescript中的react钩子表单上发送 handleSubmit
上一篇
如何设置 React-Table的样式
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(28条)