Я использую stylelint
как postcss
плагин в моей конфигурации webpack. Дальше по цепочке (выполняется после postcss-loader) я также использую less-loader
. Все зависимости используются в их самых последних версиях.
webpack.config.js
...
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('stylelint')({
"extends": "stylelint-config-standard"
})
]
}
}
...
Все работает нормально, линтинг выдает осмысленные ошибки, если они есть. Однако, поскольку я добавил переменную less в нотации camelCase, я также получаю ошибки, связанные с at-rule-*
:
(1:1) Expected "fadeAnimDuration:" to be "fadeanimduration:" (at-rule-name-case)
...
(1:1) Unexpected unknown at-rule "@fadeAnimDuration:" (at-rule-no-unknown)
Кажется, когда-то это была известная проблема, но она должна была быть исправлена в 9.8.0 согласно журналу изменений: https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md#980
Это строки в моем файле .less
, которые анализируются:
@fadeAnimDuration: 1480ms;
...
some selector {
transition: background-color @fadeAnimDuration, color @fadeAnimDuration;
}
Я делаю что-то неправильно?
Я могу избавиться от ошибки случая верблюда, изменив переменную на @fade-anim-duration
, но вторая ошибка все еще остается:
(1:1) Unexpected unknown at-rule "@fade-anim-duration:" (at-rule-no-unknown)
Я не хочу полностью отключать эти правила только для того, чтобы иметь возможность использовать переменные LESS.
Поскольку вы используете stylelint в качестве плагина PostCSS, я считаю, что вам нужно будет вручную установить для postcss-загрузчика конфигурация синтаксиса значение postcss-less.
В качестве альтернативы, и я рекомендую этот подход, вы можете использовать stylelint-webpack-плагин и использовать переключение синтаксиса, встроенное в stylelint.