我正在创建一个应用程序，创建了多个 CSS 文件，但这些文件无法导入。
我尝试安装 css-loader 和 style-loader。但这无济于事
请看下图，我有 Burger.css 文件。但导入时不可见
【问题讨论】：
import classess from './Layout.css' 有效吗？因为我认为你做不到。通常你会导入一个 css 文件如下：import './Layout.css' 它会被应用到你的代码中。
../Burger/BurgerIngredient/Burger.css，会发生什么？有错误信息吗？
标签： javascript css reactjs stylesheet
默认情况下，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 之前不会显示，因为这是它的包含文件夹。
【讨论】：