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

Question

• React.js
• JS（Emotion）中的CSS

它由以上内容组成。

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};出现以下错误消息。

意外的多余分号（无分号）stylelint（无分号）

Error

有什么办法可以解决此错误？
顺便说一句，您将看到错误，但是CSS可以正常工作。

---

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

Answer 1

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

替换：

  ${emotionReset};

具有：

  ${emotionReset}

顺便说一句，您会看到错误，但是CSS可以正常工作。

多余的分号通常不会破坏CSS。但是它也不添加任何东西，因此删除它应该是安全的。

我认为禁用无多余的分号可以解决此问题，但似乎没有提供禁用它的选项。

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