CODEWITHSUNDEEP
cssreactjsvisual-studio-code
MyNameIsDND
MyNameIsDND

Reputation: 67

How to import CSS files to React JS application?

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

enter image description here

Upvotes: 0

Views: 13679

Answers (3)

Anand
Anand

Reputation: 408

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

Without Extension

With Extension

enter image description here

Upvotes: 1

HoldOffHunger
HoldOffHunger

Reputation: 20881

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.

Upvotes: 0

Quentin Grisel
Quentin Grisel

Reputation: 4987

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.

Upvotes: 0

Related Questions