使用 Stylelint 的 SCSS mixin 函数上的未知单词

Question

我正在开发 webpack 样板，并且一直在尝试使用 scss mixins 设置 px 到 rem 转换函数。我也在使用 stylelint 来检查该项目中的错误。

我不断收到以下错误，我需要一些帮助来解决此问题。

终端

When linting something other than CSS, you should install an appropriate syntax, 
e.g."postcss-scss", and use the "customSyntax" option

13:19  ✖  Unknown word  CssSyntaxError

我的 mixin 代码如下：

Mixin

$html-font-size: 16px;

@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
}

@function ptpx($ptValue) {
    @return stripUnit($ptValue * 1.333);
}

@function rem($pxValue, $unit:'px') {
    @if $unit == 'pt' {
        @return #{ptpx($pxValue) / stripUnit($html-font-size)}rem;
    } @else {
        @return #{$pxValue / stripUnit($html-font-size)}rem;
    }
}

以下是我的 stylelint 配置：

Config

module.exports = {
    rules: {
      "at-rule-no-unknown": true,
      "block-no-empty": true,
      "color-no-invalid-hex": true,
      "comment-no-empty": true,
      "declaration-block-no-duplicate-properties": [
        true,
        {
          ignore: ["consecutive-duplicates-with-different-values"]
        }
      ],
      "declaration-block-no-shorthand-property-overrides": true,
      "font-family-no-duplicate-names": true,
      "font-family-no-missing-generic-family-keyword": true,
      "function-calc-no-unspaced-operator": true,
      "function-linear-gradient-no-nonstandard-direction": true,
      "keyframe-declaration-no-important": true,
      "media-feature-name-no-unknown": true,
      "no-descending-specificity": true,
      "no-duplicate-at-import-rules": true,
      "no-duplicate-selectors": true,
      "no-empty-source": true,
      "no-extra-semicolons": true,
      "property-no-unknown": true,
      "selector-pseudo-class-no-unknown": true,
      "selector-pseudo-element-no-unknown": true,
      "selector-type-no-unknown": true,
      "string-no-newline": true,
      "unit-no-unknown": true
    }
  };

我对此很困惑，有人可以帮助我吗？ 提前致谢！

Answer 1

正如控制台中的警告所述，您需要使用自定义语法 对 SCSS 进行 lint 处理，因为它不是 CSS，而是另一种语言：

当对 CSS 以外的内容进行 linting 时，您应该安装适当的语法，例如“postcss-scss”，并使用“customSyntax”选项

当对 CSS 以外的内容进行 linting 时，您应该安装适当的语法，例如“postcss-scss”，并使用Stylelint 的 入门指南 建议扩展共享配置，其中包括并为您配置适当的自定义语法。

您应该将现有配置替换为：

{
  "extends": "stylelint-config-standard-scss"
}

如果需要，您可以使用 null 关闭现在不想强制执行的任何规则，如下所示：

{
  "extends": "stylelint-config-standard-scss"
  "rules": {
    "color-function-notation": null
  }
}