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规则的组合。 阅读文档以获取更多信息。