web-dev-qa-db-ja.com

ミックスインが別のフォルダに保持されている場合、Sassコンパイラは「未定義のミックスイン」エラーをスローします

これが私のウェブサイトの構造のスクリーンショットです。 Screenshot of project structure

私のミックスインファイルでは、必要なすべてのsassミックスインを作成しました。

境界半径用にこのミックスインを作成しました。

 @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

これをmodulesフォルダーの_button.scssのボタンクラスに使用しようとすると、未定義の変数エラーが発生します。一方、_button.scssファイル自体で同じミックスインを使用すると、エラーは発生しません。

私の_button.scssファイルに以下のようにミックスインを含めました

button{
    background-color: $theme-color;
    border: 0px solid;
    padding: 0.7rem 3rem;
    @include border-radius(2rem);

}

正確に問題は何ですか。構造をきれいに保つために、すべてのミックスインを別々のファイルに保存したいと思います。

sassmixins
6
Arindam Dawn

@includeまたは@importでミックスインを含める必要があります

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#include_a_mixin

3
Brian McCall