2015-11-06 41 views
0

我遇到了SCSS或gulp-sass的問題。 @include的SCSS沒有被編譯爲CSS。只有高度正在編譯,而不是背景顏色或任何放在@include中的東西。導入一次mixin不會輸出任何樣式

下面我有一些文件結構和兩個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; 
    } 
} 

回答

0

與薩斯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; 
    } 
}