WebStorm gives warning for CSS files using url("/assets/...") path

Question

WebStorm gives "Cannot resolve directory 'some_path'" error. if assets path is used instead of relative path. By assets path I mean path starting with /assets/.

There is no problem when relative path is used:

Both codes works well in a browser, but for the first one WebStorm gives errors. How to solve this issue or tell WebStorm to ignore it if the path starts with /assets/?

Where is your /assets/ is located in your project? relative to the project root and website root? Please show it a screenshot of the project View panel that would show this info. The issue quite likely be because the IDE expects that /assets/ is located in the project root folder (since it starts with / (which means absolute path). If it's not (e.g. in a subfolder) then the parent folder must be marked as a Resource Root. — LazyOne
– LazyOne, Commented Oct 16, 2022 at 20:55
Yeah you were right. It didn't work in production. It was located relative to the project root. — Muhammad-Ali
– Muhammad-Ali, Commented Oct 18, 2022 at 7:34

greybeard · Accepted Answer · 2023-03-08 11:51:21Z

3

Have same error. Found solution!
Need to mark src folder as resource root.
To do that: go to webstorm setting->directories select src and click 'Resource root' button.

edited Mar 8, 2023 at 11:51

greybeard

2,6779 gold badges40 silver badges71 bronze badges

answered Mar 2, 2023 at 10:58

Bri WS

314 bronze badges

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

1 Comment

tony Over a year ago

The way I do it on PHPStorm is as follows (in case someone wonders about this): Right click on the root folder of your project, then select "Mark directory as" from the options, and then select "Resource root". The warning should disappear.

Josiah Bradley · Accepted Answer · 2025-07-18 01:00:27Z

0

The settings that control how assets are mapped are explained by JetBrains (Creator of WebStorm, etc.)
https://www.jetbrains.com/help/webstorm/configuring-project-structure.html#ws_configure_projects_content_root_folder_categories_configure

Any folder where you need to reference files as relative, can be marked as `Resource Roots`. This can be done to multiple folders.

And as an example: NextJS's /public folder should be marked like this.

Windows: File > Settings > Directories [Ctrl + Alt + S , then go to Directories]
Mac: WebStorm > Settings > Directories [⌘Сmd + , , then go to Directories.]

answered Jul 18 at 1:00

Josiah Bradley

4533 silver badges8 bronze badges

Collectives™ on Stack Overflow

WebStorm gives warning for CSS files using url("/assets/...") path

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related