如何将CSS文件导入到React JS应用程序？

如何解决如何将CSS文件导入到React JS应用程序？

我正在创建一个应用程序，创建了多个CSS文件，但是这些文件无法导入。

我尝试通过安装css-loader和style-loader。但这没有帮助

请看下面的图片，我有 Burger.css 文件。但看不到导入

解决方法

默认情况下，VS Code不会自动完成所有文件类型。如果您在Layout.js文件中编写 import ./Burger/Burger.css 或 import ./Burger/BurgerIngredient/BurgerIngredient.css ，则CSS文件将可以正常加载

如果要对VS Code中的所有文件使用自动完成功能，则可以使用此扩展名。

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

无扩展名

带有扩展名

,

好吧，因为您确认自己的./Layout.css导入无效，因此在有关css文件的情况下不应命名导入。正在执行：

import './myFile.css';

足以应用您的CSS。

请注意，css在React中是全局的，因此您可能希望使用styled component或封装css以防止对其他组件产生副作用。

现在，如果您真的想以尝试的方式添加样式，则可以使用style属性来接受对象。因此，您可以这样做：

<div style={{backgroundColor: 'red'}}>Hello World !</div>

请注意，css属性是用 camelCase 编写的。

,

您的文件结构在我看来是...

-Burger
--BurgerIngredient
----Burger.css
--Layout
----Layout.css

您的主应用程序（在此处显示）位于/Burger中。考虑到这一点，当您键入import时，您会看到下拉列表出现，显示了有用的建议，并且列出了...

-../Burger/BurgerIngredient/...

可能的有效位置。在这种情况下，为什么我们不尝试通过输入...来导入css ...

import burgercss from '../Burger/BurgerIngredient/Burger.css';

请注意，例如，Burger.css直到您选择BurgerIngredient时才会显示，因为这是其包含的文件夹。