Sass mixin 未导入或编译

Question

我使用 webpack 4 和 mini-css-extract-plugin 以及 sass-loader / node-sass 将我的 sass 编译为 css。一切似乎都工作正常，但是位于导入的 scss 文件中的 mixin 将无法工作，并且我收到构建错误。

ERROR in ./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js??ref--6-2!./src/sass/components.scss
Module build failed:
  @include radi(10px);
          ^
      No mixin named radi
      in /Users/Me/Sites/project/src/sass/components.scss (line 15, column 12)
 @ ./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js??ref--6-2!./src/css/core.css 6:10-150

奇怪的是，如果我将该 mixin 移动到引用它的 scss 文件中，那么它就会工作并编译。导入的 scss 文件的顺序是我首先查看的地方，但是 mixins 在调用它之前加载，所以我真的很困惑为什么这一直失败:(

mixins.scss 的内容

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

Components.scss 的内容

.box {
   width: 100px;
   @include radi(10px);
   background-color: pink;
}

然后我有一个 core.css 文件，它导入我所有的 scss 文件

@import url("../vendor/normalize.css");
@import url("../vendor/grid.scss");
@import url("../vendor/fonts.css")
@import url("../sass/mixins.scss");
@import url("../sass/components.scss");

正如您所看到的，mixin 在组件之前加载，因此 mixin 应该可用于 elements.scss，但事实并非如此。正如我之前提到的，如果我将 mixin 放入 elements.scss 中，其中存在对 mixin 的调用，那么 mixin 就会起作用！令人困惑！即使我将 import 语句放入 Components.scss 顶部来加载 mixin 文件，它仍然失败:(

Answer 1

导入文件时，您必须了解这些规则：

\n\n

\n

• 如果你想导入一个 scss 文件，你只需要引用它的位置和文件名；无需扩展：@import \xe2\x80\x9cpath/to/scssfile\xe2\x80\x9d;

\n

• 如果要导入 css，请使用以下命令指向 css 文件（包括其文件扩展名）url()：@import url(\xe2\x80\x9cpath/to/cssfile.css\xe2\x80\x9d);

\n

• 但如果您使用 anurl()导入 scss 文件，则该文件将被编译并添加为简单的 css 导入，因此@import url(\xe2\x80\x9cpath/to/scssfile\xe2\x80\x9d);将编译 scss 文件并将导入添加到其 css 输出文件

\n

\n\n

所以解决方案是删除url()导入的 scss 文件：

\n\n

@import url("../vendor/normalize.css");\n@import "../vendor/grid";\n@import url("../vendor/fonts.css")\n@import "../sass/mixins";\n@import "../sass/components";\n

\n\n

希望能帮助到你。

\n