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中复制边界半径混合，则工作正常，没有问题。

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

Answer 1

您将Bootstrap包含在您的项目中，并且该框架已经具有一个称为border-radius的mixin：

@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个args，为此，编译器会为您提供该错误。

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

{border-radius}

1 个答案: