时间戳

首页 > 解决方案 > stylelint 在解析 LESS 变量时抛出 at-rule-* 错误

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

问题描述

我在我的 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

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

标签： webpackpostcssstylelintpostcss-loaderless-loader

解决方案

当您使用 stylelint 作为 PostCSS 插件时，我相信您需要手动将 postcss-loader语法配置设置为postcss-less。

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

推荐阅读