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

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'.

Answer 2

two ways you can try：

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

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