如何在React组件中导入CSS文件 [英] How to import a CSS file in a React Component

问题描述

我想将CSS文件导入到react组件中.

I want to import a CSS file into a react component.

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

I've tried import disabledLink from "../../../public/styles/disabledLink"; but I get the error below;

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

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\public\styles\disabledLink.css是我要加载的CSS文件的位置.

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css is the location of the CSS file I'm trying to load.

在我看来，导入似乎没有找到正确的路径.

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.

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

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js is the location of the file that should import the CSS file.

我在做什么错，我该如何解决?

What am I doing wrong and how can I fix it?

推荐答案

如果不需要，甚至不需要命名它:

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

例如

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

在此处查看完整示例(构建JSX Live编译器作为React组件).

see a complete example here (Build a JSX Live Compiler as a React Component).

这篇关于如何在React组件中导入CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！