如何在react组件中导入css文件？

As the title says, i want to import a CSS file into a react component. I've tried the following:

正如标题所说，我想将CSS文件导入反应组件。我尝试过以下方法：

import disabledLink from "../../../public/styles/disabledLink";

But error shows me this:

但错误告诉我这个：

Module not found: Error: Cannot resolve 'file' or 'directory' ../../../public/styles/disabledLink in c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66
Hash: 2d281bb98fe0a961f7c4
Version: webpack 1.13.2

找不到模块：错误：无法解析c：\ Users \ User \ Documents \ pizza-app \ client \ src \ components @中的'file'或'directory'../../../public/styles/disabledLink。 /client/src/components/ShoppingCartLink.js 19：20-66哈希：2d281bb98fe0a961f7c4版本：webpack 1.13.2

The file is located in this path:

该文件位于此路径中：

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css

C：\用户\用户\文档\比萨饼的应用程序\客户端\ PUBLIC \风格\ disabledLink.css

To me it seems like import is not looking up the correct path. I thought with ../../../ it would start to look up the path three folder layers above.

对我来说，似乎导入并没有找到正确的路径。我想用../../../它会开始查找上面三个文件夹层的路径。

The file that should import the CSS file is located here:

应该导入CSS文件的文件位于：

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js

C：\用户\用户\文档\比萨饼应用内\客户\ SRC \部件\ ShoppingCartLink.js

Thanks for any input!

谢谢你的任何输入！

5 个解决方案

#1

You need to use css-loader when creating bundle with wepback.

在使用wepback创建bundle时，您需要使用css-loader。

Install it:

安装它：

npm install css-loader --save-dev

And add it to loaders in your webpack configs:

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

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

After this, you will be able to include css files in js.

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

#2

You don't even have to name it if you don't need to:

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

e.g.

例如

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

see a complete example here https://egghead.io/lessons/build-a-jsx-live-compiler

在这里看一个完整的例子https://egghead.io/lessons/build-a-jsx-live-compiler

#3

I would suggest using CSS Modules:

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

Rendering the Component:

渲染组件：

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

#4

The following imports an external CSS file in a React component and outputs the CSS rules in the <head /> of the website.

以下内容在React组件中导入外部CSS文件，并在网站的中输出CSS规则。

Install Style Loader and CSS Loader:
安装样式加载器和CSS加载器：

npm install --save-dev style-loader
npm install --save-dev css-loader

In webpack.config.js:
在webpack.config.js中：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

In a component file:
在组件文件中：

import './path/to/file.css';

#5

-1

Install Style Loader and CSS Loader: npm install --save-dev style-loader npm install --save-dev css-loader

安装Style Loader和CSS Loader：npm install --save-dev style-loader npm install --save-dev css-loader
Configure webpack

配置webpack

module: { loaders: [ { test: /.css$/, loader: 'style-loader' }, { test: /.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[name][local]_[hash:base64:5]' } } ] }

module：{loaders：[{test：/.css$/,loader：'style-loader'}，{test：/.css$/,loader：'css-loader'，query：{modules：true，localIdentName： '[name] [local] _ [hash：base64：5]'}}]}

#1