stylelint 在解析 LESS 变量时抛出 at-rule-* 错误

Question

我在我的 webpack 配置中使用 stylelint 作为 postcss 插件。在链的更上方（因此在 postcss-loader 之后执行），我也在使用 less-loader。所有依赖项都在其最新版本中使用。

webpack.config.js

...
'less-loader',
{
    loader: 'postcss-loader',
    options: {
        plugins: [
            require('stylelint')({
                "extends": "stylelint-config-standard"
            })
        ]
    }
}
...

一切正常，linting 会抛出有意义的错误（如果有的话）。但是，由于我在 camelCase 符号中添加了一个 less 变量，我也得到了 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

已修复：at-rule-* Less 变量和 mixin 的误报 (#3767)。

这些是我的 .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 变量而必须完全禁用这些规则。

Answer 1

由于您将 stylelint 用作 PostCSS 插件，我相信您需要手动设置 postcss-loader syntax configuration to postcss-less.

或者，我推荐这种方法，您可以使用 stylelint-webpack-plugin 并利用 stylelint 内置的语法切换功能。

stylelint 在解析 LESS 变量时抛出 at-rule-* 错误

stylelint throws at-rule-* errors when parsing LESS variables

webpack

postcss

stylelint

postcss-loader

less-loader