Search code examples
htmlcsswebstormjetbrains-idecode-inspection

Webstorm code inspection can't resolve served file

I created a blank project in Webstorm (2018.3) and created the following file structure:

.
+--css
|  +--style.css
+--view
   +--index.html

I then added this code to the head of index.html:

<link rel="stylesheet" type="text/css" href="/src/css/style.css">

Now code inspection feels that this is correct, and indeed that is the path from the project root. However Webstorm will not serve style.css from this path, presenting MIME validation errors if I attempt to use it.

Refused to apply style from 'http://localhost:63342/src/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I did some digging into the built-in server for WebStorm which revealed that it includes the project name as part of the root path. I adjusted the path to style.css and sure enough, this worked /JS-Tip/css/style.css. However this causes the code inspector to complain that it can't resolve the path.

Looking into this problem led me to this question Webstorm: "Cannot Resolve Directory". So I added src/ as a resource root, but I was still unable to use it in the path. So I tried setting the project root Js-Tip/ as a resource root but it did not resolve the inspection warning. I even tried adding both JS-Tip/ and src/ as resource roots and it changed nothing, not even when using JS-Tip/src/css/style.css as the path.

So my question is, how do I resolve this warning? Or, barring that, how do I get the server to accept src/ as an acceptable root for the file path?

Solution

  • You have a leading slash in your URL (<link rel="stylesheet" type="text/css" href="/src/css/style.css">) - note the leading / before src. Such slashes tell the browser to resolve URLs from the web server root. But the built-in web server serves files from http://localhost:63342/<project name>, so no resources can be loaded from http://localhost:63342 - thus 404 errors are thrown.

    To work out the issue, change URLs to the ones relative to current .html file - like href="../css/style.css"