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

Question

I am creating an application, created multiple CSS files but those are not able to import.

I tried by installing css-loader and style-loader. But it doesn't help

Please look below picture, I have Burger.css file. but it not visible to import

Answer 1

VS Code by default doesn't autocomplete all file types. If you write import ./Burger/Burger.css or import ./Burger/BurgerIngredient/BurgerIngredient.css in your Layout.js file, your css files will be loaded fine.

If you want to use autocomplete for all files in VS Code, you can use this extension.

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

Without Extension

With Extension

Answer 2

Ok since you confirmed that your ./Layout.css import does not work, you should not name your import when it's about a css file. Doing :

import './myFile.css';

is enough to apply your css.

Note that css is global in React, so you might want to use styled component or encapsulate your css to prevent side effect on other components).

Now, if you really want to add style the way you tried to, there is the style attribute which accepts an object. So you could do:

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

Note that the css properties are written in camelCase .

Answer 3

Your file structure appears to me to be...

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

Your primary application, from what it appears here, is in /Burger . Considering that, when you type import, you see the dropdown appear, showing helpful suggestions, and it lists...

-../Burger/BurgerIngredient/...

As a possible, valid location. In that case, why don't we try importing css, by typing out...

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

Note, for instance, Burger.css wouldn't show up until you select BurgerIngredient , because that's its conntaining folder.