Как исправить ошибку Stylelint, связанную с недопустимым медиа-запросом «(min-width: $var-name)» в правиле media-query-no-invalid?

Question

DarkVoyager

linter

Как исправить ошибку Stylelint, связанную с недопустимым медиа-запросом «(min-width: $var-name)» в правиле media-query-no-invalid?

Как можно исправить ошибку "Unexpected invalid media query "(min-width: $var-name)" media-query-no-invalid" при запуске Stylelint после импорта переменной из файла constants.scss для использования в медиа-запросе?

3 марта 2024 г. 13:38

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для исправления данной ошибки в правиле media-query-no-invalid в Stylelint, необходимо использовать конкретное значение ширины в медиа-запросе, а не переменную. 

Вместо использования переменной $var-name в медиа-запросе "(min-width: $var-name)", необходимо явно указать значение ширины. Например, если значение переменной $var-name равно 768px, то медиа-запрос должен выглядеть так: "(min-width: 768px)".

Другой вариант исправления ошибки заключается в объявлении переменной в SCSS файле, а затем импортировать эту переменную в CSS файл, где используется для медиа-запроса. Например, в файле constants.scss объявляем переменную:

$var-name: 768px;

Затем импортируем эту переменную в CSS файл, где используем медиа-запрос:

@import 'constants';

@media (min-width: $var-name) {
  // стили для этого медиа-запроса
}

Таким образом, исправление ошибки связанной с недопустимым медиа-запросом "(min-width: $var-name)" в правиле media-query-no-invalid будет зависеть от специфики вашего проекта и использования переменных в медиа-запросах.

Answer 2

.eslintc 
 {
    "rules": {
        "media-query-no-invalid": false
    }
}