`border-radius' 的参数数量错误（4 对 2）

Question

这是我的 scss 文件结构： files structure

全部导入到main.scss

在 _mixins.scss 我有一个 mixin，我想在 _buttons.scss 中使用它，但它失败了。

_mixins.scss

@mixin border-radius(
  $top-left: null,
  $top-right: null,
  $bottom-right: null,
  $bottom-left: null
) {
  -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left;
  -moz-border-radius: $top-left $top-right $bottom-right $bottom-left;
  -ms-border-radius: $top-left $top-right $bottom-right $bottom-left;
  border-radius: $top-left $top-right $bottom-right $bottom-left;
}

_buttons.scss

.header-btn {
  @extend .btn;
  @extend .bg-white;
  @include border-radius(0, 10px, 10px, 10px);
  font-size: 12px;
}

这是错误信息：

 error  in ./src/assets/scss/main.scss

 @include border-radius(0, 10px, 10px, 10px);
          ^
      Wrong number of arguments (4 for 2) for `border-radius'
      in C:\Users\M0RT3Z4\Documents\Project\Landing\arda-landing\src\assets\scss\components\_buttons.scss (line 4, column 12)

如果我在 _buttons.scss 中复制 border radius mixin，它工作正常，没有问题。

main.scss 导入到 vue cli 3 项目中的 main.js。

Answer 1

您在您的项目中包含 Bootstrap，并且此框架已经有一个名为 border-radius:

的混入

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: $radius;
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

如您所见，这个 mixin 只有 2 个参数，为此编译器给了你那个错误。

尝试更改您的混音的名称，因为这只是名称冲突的问题。

`border-radius' 的参数数量错误（4 对 2）

Wrong number of arguments (4 for 2) for `border-radius'

sass

mixins

scss-mixins