SCSS border-radius混合器传参报错：参数数量不符（4个应为2个）

问题根源 #

你碰到的这个「Wrong number of arguments (4 for 2) for border-radius'」报错，本质是**SCSS解析_buttons.scss时，找不到你自定义的border-radius混合器，转而调用了SCSS内置的border-radius()函数**——这个内置函数最多只接受2个参数（比如统一圆角border-radius(10px)或对角圆角border-radius(10px 20px)`），所以传入4个参数就会触发错误。

为什么把混合器直接复制到_buttons.scss里就正常？因为此时SCSS解析该文件时，先读取到你自定义的混合器，会优先使用它，而非内置函数。

解决方案 #

1. 调整main.scss的导入顺序（最直接的修复）

确保工具类文件（比如_mixins.scss）在所有依赖它的组件样式文件之前导入。你的main.scss应该改成类似这样的结构：

// 先导入全局工具：混合器、变量、函数等
@import './mixins'; // 对应你的_mixins.scss文件路径
@import './variables'; // 如果有全局变量文件也提前导入

// 再导入组件/模块样式文件
@import './components/buttons'; // 你的_buttons.scss
// 其他样式文件...

SCSS中带下划线的局部文件，导入时可以省略下划线和.scss后缀，当然写全路径也没问题。

2. 给自定义混合器加前缀（避免命名冲突）

为了彻底杜绝和SCSS内置API重名的问题，建议给你的混合器加个专属前缀，比如custom-：

// _mixins.scss里修改混合器名称
@mixin custom-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 custom-border-radius(0, 10px, 10px, 10px);
  font-size: 12px;
}

这样不管导入顺序如何，都不会和内置函数混淆。

3. 全局自动导入混合器（Vue CLI优化方案）

如果你的项目有很多组件需要使用这个混合器，可以配置Vue CLI自动全局导入，不用手动在main.scss或每个组件里导入：
在项目根目录的vue.config.js（如果没有就新建一个）里添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 自动在所有SCSS文件开头导入_mixins.scss
        additionalData: `@import "@/assets/scss/mixins.scss";`
      }
    }
  }
}

配置后，所有SCSS文件都会自动加载你的混合器，省去手动管理导入顺序的麻烦。

内容的提问来源于stack exchange，提问作者MR STARK