Sass(SCSS)で@importを使用して外部のSCSSファイルを取り込む方法

import/
　├ setting
　│　└ _config.scss
　├ _button.scss
　├ import.scss
　├ import.css
　└ ...

$color-red: red;
$color-blue: blue;

@mixin button($bg-color) {
  background-color: $bg-color;
  border: 0;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}

.button_error {
  // _config.scssで指定した$color-redを使用
  @include button($color-red);
}

.button_info {
  // _config.scssで指定した$color-blueを使用
  @include button($color-blue);
}

@import "setting/_config";
@import "_button";

// コンパイルエラー
// @import "_button";
// @import "setting/_config";

sass import.scss:import.css

.button_error {
  background-color: red;
  border: 0;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}

.button_info {
  background-color: blue;
  border: 0;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}