109

This is starting to bug me and I'd either like it turned off or fixed. So Webstorm has a sweet feature in it's HTML parser that will attempt to resolve directories in strings that are supposed to reference a file in your project. For example:

two examples

Webstorm is correct. My front end code is all in /app but my server serves up files in app on the root, so in the web context /app is actually just /. As a side, this behavior also impacts my angular templates:

webstorm hates angular directive templateUrl

and my angular-ui routes (I imagine it would do that for regular angular routes as well).

webstorm hates angular routes templateUrl

Is there a way that I can change webstorm to treat /app as the root so this is a useful feature? If not, is there a way I can disable this? I tried going into the inspector, but couldn't find an option for it:

webstorm inspector

And no, it's not the XML one... I tried.

Help appreciated. Thanks...

kentcdodds
  • 27,113
  • 32
  • 108
  • 187

5 Answers5

207

To make file references to a non-root folder in your project, you'll need to mark that directory as a Resource. To do this, go to Settings > Directories and select your asset root folder from the right-hand panel. Then mark it as Resource Root by clicking the button above the file browser.

From the Jetbrains documentation, a Resource Root enables WebStorm to complete relative paths to resources under the selected folder. This means that you should use Resource Root on a folder that holds all the resources you would like to refer to (e.g. styles, scripts, ...).

thomastuts
  • 3,459
  • 3
  • 20
  • 28
  • 2
    I have the same problem: **"Cannot resolve file", cannot resolve directory"** Seems that WebStorm, phpStrom, have had this issue for a very long time, there are hundreds of treads asking the same thing, no real clear answer it seems, goes back to 2011 it seems Most common responses are: - need to mark that directory as a Resource root. - Need to map directory/file in Settings > php > server - disable inspection. < this one cracks me up.... is like turning off notice warnings. – rudy Dec 20 '14 at 06:12
  • 3
    For me, I was marking my "css" and "js" folders as resource roots. But I continued to get the error notices. They both lived under the "www" directory. Marking the www folder as the resource root finally got rid of the notices. So if your images, js, and css live under one directory, you can mark their parent directory as the Resource root. – b01 Dec 28 '14 at 15:41
  • In Webstorm 9.x on mac, it's under Webstorm->Preferences->'Your currently loaded project name'->Directories. – ra170 Mar 16 '15 at 03:01
  • I had the exactly same situation and marked the directories correctly. But anyways the code inspector marked them as **not found**. Restarting PHPStorm (version 9) made it. Maybe re-opening the project would be enough. – Markus Zeller Aug 27 '15 at 09:25
  • For the record, in PhpStorm 10 (Mac) marking the Resource Root fixed the error straight away, but clearly your mileage may vary. – William Turrell Dec 23 '15 at 16:44
  • But what do I do if the files are on the linked remote host? – jarrodwhitley Apr 16 '19 at 19:30
22

I had this problem on Mac and solved it by changing the directories properties.

  1. Open Preferences:

Webstorm > Preferences

  1. Go to Directories section in the Preferences

Project > Directories

  1. Add content root and Resource roots

Screenshot after adding the resources root

geckob
  • 7,680
  • 5
  • 30
  • 39
  • This process could not resolve my path issues. I have also been using a long path like "../../src/style.scss" to import scss files. Using this above method, Webstorm understands it and resolves the path error. But, while publish my project build (in angular 7), I receive an error that says that it could not find scss files. – akgupta Jan 21 '20 at 06:14
6

for people using IntelliJ Ultimate:

enter image description here

JoachimR
  • 5,150
  • 7
  • 45
  • 50
  • 3
    Hey! I followed this, no luck (I still get the obnoxious "cannot resolve directory" warning). Is there anything else that I need to do aside from marking the directory as Sources? – Madara's Ghost Mar 27 '15 at 17:29
  • Say your directory structure is as follows `folder1/folder2/..` where `folder2` contains all your resources. You need to mark `folder1` as `Source` and `folder2` as `Resource`. [Reference](https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000081204-Can-t-resolve-directory-using-Resource-Root) – Rothin Sen Mar 04 '19 at 07:45
4

I think this is what most people are looking for: not changing the content root, but adding a sub-folder as 'Resource Root'.

enter image description here

ViBoNaCci
  • 390
  • 3
  • 15
2

In Jet Brains WebStorm Go to File-->Settings-->Left Panel Select Project-->Click on Derectories-->Middle Panel Select Resource Root-->add the folders/Directories under your Project for reference or In the Right Panel You Can see +Add Content Root choose the directories and the Apply-->OK

isherwood
  • 58,414
  • 16
  • 114
  • 157
Nitesh Dash
  • 21
  • 2