WebStorm CSS cannot resolve custom property

Question

In my CSS file I'm using custom CSS as can be seen from the photo. WebStorm gives errors. How can I fix it?

When hovered on it full error is here

Cannot resolve '--color-gray-1' custom property
This inspection warns about CSS custom property variable references which cannot be resolved to any valid target

Earring

works fine for me using similar syntax. Please try invalidating caches (File | Invalidate caches, Invalidate and restart). If it doesn't help, please create a support ticket, providing your .css file – Stesha

Seems like it happens only on non-project files. There is a youtrack issue filed for it (unless it was you) – Levon

Answer 1

Adding the property to custom CSS properties suppresses the 'Unknown CSS property' inspection; But in your screenshot I am guessing the warning comes from W3C validator. W3C Validator Inspection is based on external tool provided by W3C (online version available at http://jigsaw.w3.org/css-validator/#validate_by_input), so we can do nothing to fix such warnings. Plus w3C validator is not always up-to-date and reports errors for valid CSS, but some users still like to have it enabled.

You can only disable this inspection if you don't like these errors being displayed: hit Alt+Enter and choose 'Disable W3C CSS validation'.

Starstudded

This is not the case, my phpstorm was working fine until few days ago (not showing error as soon as I add them). No updates were downloaded or installed ( I have been offline for past few weeks) which means there should be some settings accidentally triggered or files corrupted, causing this to appear. – Levon

Answer 2

Make sure directory css file resides in is not excluded: right click on directory > Mark Directory As > Not Excluded

Intoxicate

Explanation: That's a common problem when Libraries are marked as ignored for indexing. For example one would set the "node_modules" directory to ignored/excluded in general. Then you should Mark explicitly the Libraries where these stylings are defined as "Not excluded". (bootstrap, tailwind, material UI, etc. ...) – Moluccas

Answer 3

two ways you can try：

1. :root {
     --color-gray-1: #666666;
   }

2. html, body {
     --color-gray-1: #666666;
     color: var(--color-gray-1)
   }

Autointoxication

Can you add a short description? – Alfano

As you can see, he already did that, just a few lines above! – Levon

Answer 4

you have to save your color as color code in the root of your project and then you can use it in all component of your project .

Maelstrom