css - 当 `stylelint-scss` 告诉我使用 `list.nth` 时，为什么 SCSS 会抱怨？

Question

我这里有点情况。

我在 React 应用程序中使用 SCSS 并使用sass-loader我的 SCSS/CSSstylelint和它的扩展名进行lint stylelint-scss。

我从这里借了一些代码：https ://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796 ，我正在尝试在我的文件中使用它。这是我的方法：

@function luminance($color) {
  $red: nth(linear-channel-values(), red($color) + 1);
  $green: nth(linear-channel-values(), green($color) + 1);
  $blue: nth(linear-channel-values(), blue($color) + 1);

  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

于是stylelint-scss向我抱怨：

WARNING in
src/assets/scss/helpers.scss
 282:9   ✖  Expected list.nth instead of nth        scss/no-global-function-names
 282:38  ✖  Expected color.red instead of red       scss/no-global-function-names
 283:11  ✖  Expected list.nth instead of nth        scss/no-global-function-names
 283:40  ✖  Expected color.green instead of green   scss/no-global-function-names
 284:10  ✖  Expected list.nth instead of nth        scss/no-global-function-names
 284:39  ✖  Expected color.blue instead of blue     scss/no-global-function-names

好的，所以我将nth函数调用更改为list.nth... 然后我收到另一个投诉：

@use "sass:color";
@use "sass:list";

@function luminance($color) {
  $red: list.nth(linear-channel-values(), color.red($color) + 1);
  $green: list.nth(linear-channel-values(), color.green($color) + 1);
  $blue: list.nth(linear-channel-values(), color.blue($color) + 1);

  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

ERROR in ./src/assets/scss/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/resolve-url-loader!./src/assets/scss/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "  $red: list": expected expression (e.g. 1px, bold), was ".nth(linear-channel"
        on line 282 of src/assets/scss/helpers.scss
        from line 7 of /Users/ogabay/Projects/mercury/app/pennypal/src/assets/scss/index.scss
>>   $red: list.nth(linear-channel-values(), color.red($color) + 1);

   ------------^

 @ ./src/assets/scss/index.scss 2:26-262 43:4-64:5 46:18-254
 @ ./src/index.jsx

这里的问题是stylelint-scssorsass-loader吗？

标签： csswebpacksasssass-loaderstylelint