有没有办法解决 CSS 变量中分号的 Stylelint 错误？

Question

React.js
Css in JS(情感)

由以上组成

Stylelint配置如下。

module.exports = {
  extends: [
    "stylelint-config-standard",
    "./node_modules/prettier-stylelint/config.js",
  ],
  ignoreFiles: ["**/node_modules/**", "src/styles/**"],
  plugins: ["stylelint-order"],
  rules: {
    "declaration-empty-line-before": "never",
    indentation: 2,
    "no-missing-end-of-source-newline": null,
    "string-quotes": "single",
    "order/properties-alphabetical-order": true,
  },
};

CSS如下

import emotionReset from "emotion-reset";

const globalStyle = css`
  ${emotionReset};
`;

${emotionReset}; 出现以下错误消息。

Unexpected extra semicolon (no-extra-semicolons)stylelint(no-extra-semicolons)

Error

有什么办法可以解决这个错误吗？
顺便说一下，您会看到错误，但是 CSS 正在工作。

我认为禁用 no-extra-semicolons 会解决问题，但似乎没有提供禁用它的选项。
no-extra-semicolons · stylelint

Answer 1

这看起来像是一个有效的警告。您应该可以通过从突出显示的行中删除分号来修复它。

替换：

  ${emotionReset};

与：

  ${emotionReset}

By the way, you will see the error, but the CSS is working.

额外的分号通常不会破坏您的 CSS。但它也不会添加任何东西，所以删除它应该是安全的。

I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.

您可以使用 null 来禁用规则。参见 stylelint 的 configuration docs for more details.

Answer 2

我认为这条规则适合你

"no-extra-semicolons": [
 null,
  {
    "message": "Extra semi-colon."
  }
],

有没有办法解决 CSS 变量中分号的 Stylelint 错误？

Is there a way to resolve the Stylelint error for semicolons in CSS variables?

javascript

css

reactjs

stylelint

scss-lint