Question

我遇到了SCSS或gulp-sass的问题。来自@include的SCSS没有被编译为CSS。只编译高度，但不包括背景颜色或@include内的任何内容。

下面我有一些文件结构和两个sass文件，一些帮助真的很感激，谢谢！

// ==============================================
// File structure

/
|_ src
   |_ utils
   |  |_ _mixins.scss
   |
   |_ views
   |  |_ _index.scss
   |
   |_ style.scss

// ==============================================
// _mixins.scss

//
// Mixin to prevent styles from being loaded multiple
// times for components that rely on other components.
//
// @mixin exports
// @param {string} name
//
$modules: () !default;
@mixin exports($name) {
  @if (index($modules, $name) == false) {
    // If module does not exist append name to modules list
    // and write content of module in stylesheet.
    $modules: append($modules, $name);
    @content;
  }
}

// ==============================================
// style.scss

@charset "utf-8";

@import "views/index";

// ==============================================
// _index.scss

@import "../utils/mixins";

#entry {
  height: 100%;
}

@include exports("index") {
  #entry {
    background-color: #ff0000;
  }
}

Answer 1

从Sass 3.4开始，index()函数在列表中不存在该项时不返回false。它返回null。但是，即使我们解决了这个问题，你的mixin仍然无法按预期工作，因为你没有覆盖全局变量：

$modules: () !default;
@mixin exports($name) {
  @if (index($modules, $name) == null) { // modified
    // If module does not exist append name to modules list
    // and write content of module in stylesheet.
    $modules: append($modules, $name) !global; // modified
    @content;
  }
}

Import-once mixin根本不输出任何样式

1 个答案: