Gulp-sass沒有正確編譯Foundation 6

我在Foundation 6文件中遇到了一些問題，因爲某些原因他們只是沒有包含所有的sass組件。我試圖使用基金會5，它工作得很好。
Gulp-sass沒有正確編譯Foundation 6

這是我的任務，一飲而盡：

gulp.task('styles', ['clearCss'], function() { 
    gulp.src('assets/sass/app.scss') 
     .pipe(plumber(plumberErrorHandler)) 
     .pipe(sourcemaps.init()) 
     .pipe(sass({ 
      outputStyle: 'compressed' 
     }) 
     .on('error', notify.onError(function(error) { 
      return "Error: " + error.message; 
     })) 
     ) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions', 'ie >= 9'] 
     })) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./assets/dist/css')) 
     .pipe(browserSync.stream({match: '**/*.css'})) 
     .pipe(notify({ 
      message: "Styles task complete!" 
     })); 
});

這裏是我的app.scss：

// Import Foundation 
@import "../components/foundation/scss/foundation";

它與我自己的SASS文件，但完全無視基礎部分。

來源

2015-11-25 user3586478

你應該導入一個文件foundation-sites.scss，而不是scss/foundation.scss。文件foundation.scss只有一個@mixin基礎，一切包含在基礎-sites.scss：

@include foundation-everything;

但是基金會sites.scss在6.0.4的錯誤，這是我的日誌：

Error in plugin 'sass' 
Message: 
    bower_components\foundation-sites\foundation-sites.scss 
Error: File to import not found or unreadable: foundation 
     Parent style sheet: stdin 
     on line 1 of stdin 
>> @import 'foundation';

的修復：從 @import 'foundation';到@import 'scss/foundation';文件基金會sites.scss

更改系NR 1

來源

2015-11-26 11:35:12

是的，我被這個字符串'@import'foundation';'弄糊塗了，所以在我改變路徑幷包含** foundation-sites.scss **之後，這最終開始工作。謝謝。 – user3586478

我有這個相同的問題，但我在這裏說，我不相信這是正確的答案。 Zurb實際上不鼓勵使用'foundation-sites.scss'並導入OP現在正在做的事情。（見：https：//github.com/zurb/foundation-sites/issues/7537）除非你想包含所有內容，否則你不想使用'foundation-sites.scss'。如果您正在進行自定義安裝，您應該修改'foundation.scss'中的組件。這就是說。我的也沒有編譯。 – buschschwick

我必須編輯基礎站點的bower.json文件以更改main.scss基礎@import。

來源：

"main": [ 
    "scss/foundation.scss", 
    "js/foundation.js" 
],

要：

"main": [ 
    "foundation-sites.scss", 
    "js/foundation.js" 
    ],

除了基礎-sites.scss文件。

@import 'foundation';

要：

@import 'scss/foundation.scss';

我不認爲這是採取的最佳途徑，但我的青菜，咕嚕和亭子的知識是有限的。

來源

2015-11-29 21:57:39

我做什麼我一飲而盡+亭子設置： /src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything; settings.scss包含我的基礎變量覆蓋，自定義CSS等招數對我來說是@import完整的文件路徑，然後@include的混入。

儘管包含所有內容都過分，但我更願意開發並不麻煩，然後使用uncss來清理死掉的CSS代碼。

來源

2016-01-24 04:54:33 tomByrer

我已經吞下，青菜與基金會網站（基金會6）工作：

我main.scss文件：

@charset 'UTF-8'; 
/** 
* Main SCSS 
* Version 1.0.0 
* built with foundation-sites 
*/ 

// import custom settings 
@import 'settings'; 

// import foundation sass 
@import "../bower_components/foundation-sites/scss/foundation"; 

/* either include all foundation components… //*/ 
@include foundation-everything; 

/* or include specific foundation components //*/ 
// @include foundation-global-styles; 
    /* include either foundation-grid… //*/ 
// @include foundation-grid; 
    /* or foundation-flex-grid (but don't include both) //*/ 
// @include foundation-flex-grid; 
// @include foundation-typography; 
// @include foundation-button; 
// @include foundation-forms; 
// @include foundation-visibility-classes; 
// @include foundation-float-classes; 
// @include foundation-accordion; 
// @include foundation-accordion-menu; 
// @include foundation-badge; 
// @include foundation-breadcrumbs; 
// @include foundation-button-group; 
// @include foundation-callout; 
// @include foundation-close-button; 
// @include foundation-drilldown-menu; 
// @include foundation-dropdown; 
// @include foundation-dropdown-menu; 
// @include foundation-flex-video; 
// @include foundation-label; 
// @include foundation-media-object; 
// @include foundation-menu; 
// @include foundation-off-canvas; 
// @include foundation-orbit; 
// @include foundation-pagination; 
// @include foundation-progress-bar; 
// @include foundation-slider; 
// @include foundation-sticky; 
// @include foundation-reveal; 
// @include foundation-switch; 
// @include foundation-table; 
// @include foundation-tabs; 
// @include foundation-thumbnail; 
// @include foundation-title-bar; 
// @include foundation-tooltip; 
// @include foundation-top-bar;

如果你不希望加載所有的基礎componenents，你不必。而不是@include foundation-everything，只需@include您需要的特定組件。

來源

2016-02-18 18:39:30

爲基礎6正確的做法：

，如果你看一下foundation.scss文件（https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss）

是它導入所有必需的組件，但由於他們現在的混入，而不是經常sass你必須明確地告訴你要使用它們，只需調用mixin即可。

app.scss

@import 'foundation'; 
@include foundation-everything; // Very important if you want to include all of foundation css to your complied css

gulpfile.js

gulp.task('scss', function() { 
    return gulp.src('app.scss') 
     .pipe(plugins.sass(
      {includePaths: ['./node_modules/foundation-sites/scss']} 
     )) 
     .pipe(gulp.dest('css')) 
     .pipe(plugins.notify({ message: 'Sass task complete' })); 
});

來源

2016-03-30 18:04:35

我喜歡這個解決方案。如果我想減少我想使用的內容，我可以創建自己的foundation.scss副本並創建一個自定義混合。 includePaths是最有幫助的一部分。感謝分享Jimmy。 – UncleAdam

@UncleAdam歡迎隨時問我任何網絡開發相關的問題 –

如果你有gulpfile，包括 'node_modules /基礎的網站/ SCSS'，然後在您的應用程序。 scss或style.scss執行以下操作：

@import "settings/settings"; 
@import "foundation"; 
@include foundation-everything;

這樣你就可以進口一切基金會提供的服務。當然，所有的事情都可能會過時，但這是一個可選的選擇。吞任務的

實施例：

gulp.task('css', function() { 
    return gulp.src(assets + 'scss/*.scss') 
     .pipe(sass({ 
       includePaths: 'node_modules/foundation-sites/scss', 
       errLogToConsole: true 
      })) 
      .on('error', handleError) 
     .pipe(prefixer()) 
     .pipe(gulp.dest(themeDir)) 
     .pipe(browserSync.stream()); 
});

當然，的HandleError需要被定義。在我的情況下，它的定義如下：

var handleError = function(err) { 
    if (err) { 
    var args = Array.prototype.slice.call(arguments); 
    console.log(args); 
    this.emit('end'); 
    } 
};

不要忘記包含所需的依賴關係。

來源

2016-09-28 20:46:38

Gulp-sass沒有正確編譯Foundation 6

回答

相關問題