Importing css file in jsx using relative path

Question

I feel a bit silly asking this, but I'm having trouble with resolving a relative path in my React app.

Where I want to import the css:

src/components/pages/mypage.js

Where my css file is located:

src/custom_styles/sidebar.css

How I'm trying to import sidebar.css in mypage.js:

import '.../custom_styles/sidebar.css'

This is resulting in Module not found: Can't resolve '.../custom_styles/sidebar.css' in the console when compiling. What am I doing wrong?

Only use two periods.import '../custom_styles/sidebar.css' — tdurnford
– tdurnford, Commented Feb 26, 2020 at 23:55

boosted_duck · Accepted Answer · 2020-02-27 00:05:48Z

3

import '../../custom_styles/sidebar.css'; in your mypage.js file.

../ means that you're going one level up from your current file. In your case you have to move two ups.

answered Feb 27, 2020 at 0:05

boosted_duck

5084 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hlkughl · Accepted Answer · 2020-02-27 00:06:12Z

1

import '../../../custom_styles/sidebar.css'

Each time you want o get to the parent folder add ../ so if you want to get to 3 folders above use ../../../ , not .../

answered Feb 27, 2020 at 0:06

hlkughl

3262 silver badges3 bronze badges