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");

正如您所看到的，mixins在组件之前被加载，因此mixin应该可用于components.scss，但它不是。正如我前面提到的，如果我将mixin放入components.scss，其中调用mixin然后mixin工作！混乱！即使我将一个import语句放到components.scss的顶部来加载mixin文件，它仍然会失败：（

Answer 1

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

如果要导入scss文件，只需要引用其位置和文件名;无需延期：@import “path/to/scssfile”;
如果您要导入css，请使用url()指向包含其文件扩展名的css文件：@import url(“path/to/cssfile.css”);
但如果您使用url()导入scss文件，那么该文件将被编译并添加为简单的css导入，因此@import url(“path/to/scssfile”);将编译scss文件并添加导入到其css输出文件

因此，解决方案是删除导入的scss文件的url()：

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

希望它有所帮助。

Answer 2

这可能只是上面代码中的拼写错误，但在; import之后您错过了fonts.css？也许这会有所帮助..

Sass mixin没有导入或编译

2 个答案: