SASS 拋出錯誤 Undefined Mixins: Module build failed (from./node_modules/sass-loader/dist/cjs.js): SassError: Undefined mixin

Question

我正在做一個反應項目，當我嘗試使用像 @include 這樣的 mixin 時，它給出了一個編譯錯誤：

  ╷
7 │ ┌   @include mobile {
8 │ │     flex-direction: column;
9 │ └   }

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.

我已經安裝了軟件包並檢查它是否沒有正確安裝我仍然得到這個錯誤我該怎么辦？

代碼：

@import "../../global.scss";

.contact {
  background-color: white;
  display: flex;

  @include mobile {
    flex-direction: column;
  }

  .left {
    flex: 1;
    overflow: hidden;

    img {
      height: 100%;
    }
  }

Answer 1

mixin mobile僅通過名稱解析，不使用explicit imports 。 當使用在另一個文件中聲明的 sass 變量、mixin 或 function 時，建議將它們顯式導入到當前文件中，例如：

@use "../../global.scss" as s;

.contact{ 
 @include s.mobile {
   flex-direction: column;
 }
}

而且Sass團隊不鼓勵使用@import規則，而是更喜歡@use和@forward規則的組合。 閱讀文檔以獲取更多信息。