如何在 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;

未找到模块:错误:无法解析 c:UsersUserDocumentspizza-appclientsrc 中的文件"或目录"../../../public/styles/disabledLink组件@ ./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:UsersUserDocumentspizza-appclientsrccomponents @ ./client/src/components/ShoppingCartLink.js 19:20-66 Hash: 2d281bb98fe0a961f7c4 Version: webpack 1.13.2

C:UsersUserDocumentspizza-appclientpublicstylesdisabledLink.css 是我尝试加载的 CSS 文件的位置.

C:UsersUserDocumentspizza-appclientpublicstylesdisabledLink.css is the location of the CSS file I'm trying to load.

对我来说，import 似乎没有找到正确的路径.

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:UsersUserDocumentspizza-appclientsrccomponentsShoppingCartLink.js 是应该导入 CSS 文件的文件的位置.

C:UsersUserDocumentspizza-appclientsrccomponentsShoppingCartLink.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 实时编译器作为 React 组件).

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

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