Question

我想导入一个 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

64

49

24

Answer 1

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

例如

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

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

Answer 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 文件。

Answer 3

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

Answer 4

下面在 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' ]
            }
        ]
    }
}

在组件文件中：