基金會進口與Libsass，節點薩斯中間件不是編譯

我使用Node.js的使用Express作爲我的基地，我的應用程序，並在嘗試使用NPM包節點薩斯中間件社科院編制和基礎網站爲基礎scss源碼。基金會進口與Libsass，節點薩斯中間件不是編譯

我app.js包含以下，

var sass = require('node-sass'); 
var sassMiddleware = require('node-sass-middleware'); 

app.use(sassMiddleware({ 
src: path.join(__dirname,'scss'), 
dest: path.join(__dirname,'public/css'), 
prefix: '/css', 
includePaths:[path.join(__dirname, 'node_modules/foundation-sites/scss/')], //Make sure we include the foundation library. ^-^; 
debug: true, 
outputStyle: 'extended' 

})); 
app.use(express.static(path.join(__dirname, 'public')));

我style.scss樣子：

@import 'foundation'; 

@import 'stuff'; /*Testing imports functionality*/ 

body{ 

    color:black; /*Just for testing compilation*/ 

}

和stuff.scss樣子：

somerandomtag{ 

    @extend body; 
    border:5px solid black; 

}

在我的佈局.jade我已添加

link(rel='stylesheet', href='/css/style.css')

當我刷新我的網頁，在我的日誌，我可以看到下面的輸出：

GET /登錄200 356.910毫秒 - 511源： F：\用戶\ trutt \文件\項目\ MyProject的\ scss \ style.scss dest： F：\ Users \ trutt \ Documents \ Projects \ MyProject \ public \ css \ style.css
閱讀：F：\ Users \ trutt \ Documents \ Projects \ MyProject \ public \ css \ style .css GET /js/jquery.cookie.js 304 7.621 ms - - GET /css/style.css - - ms - - render：F：\ Users \ trutt \ Documents \ Projects \ MyProject \ scss \ style.scss來源： F：\ Users \ trutt \ Documents \ Projects \ MyProject \ sc SS \ style.scss DEST： F：\用戶\ trutt \文件\項目\ MyProject的\ PUBLIC \ CSS \ style.css的GET /css/style.css 200 7.127毫秒 - 269

所有最終導致在編譯的style.css：

/** 
* Foundation for Sites by ZURB 
* Version 6.2.1 
* foundation.zurb.com 
* Licensed under MIT Open Source 
*/ 
somerandomtag { 
    border: 5px solid black; } 

/*Testing imports functionality*/ 
body, somerandomtag { 
    color: black; 
    /*Just for testing compilation*/ }

爲基礎的標題本身是可見的，它告訴我，我包括路徑處於工作狀態。我已經證明Sass似乎通過編譯檢查和導入測試以及繼承來工作。但是......基金會的所有規則在哪裏？我錯過了什麼嗎？

所有安裝的軟件包都是在最近24小時內直接從npm新安裝的，所以我會假設我正在使用最新的npm軟件包版本。

來源

2016-04-28 Travis Truttschel

經過幾個小時玩不同的sass/gulp/gem替代品後，我發現我的問題。

我在探索包含在npm包中的基礎站點的文件。

它似乎改變了以下就像app.js

includePaths:[path.join(__dirname, 'node_modules/foundation-sites/scss/')],

要

includePaths:[path.join(__dirname, 'node_modules/foundation-sites/assets/')],

修復的問題。

我相信這是因爲檔案的基礎。以上資產路徑中的scss包含

@import '../scss/foundation'; 

@include foundation-everything;

我假設底線是什麼使得區別。可能/ scss /文件夾中的其他文件不包含foundation-everything。我認爲這是編譯基礎CSS的主人包括。

再一次建立了關於爲什麼以及如何工作的假設，但在Express上通過NPM在Foundation上使用node-sass-middleware的文檔很少，並且上述修改解決了此問題。

來源

2016-04-29 03:34:38

我也遇到了同樣的問題。你的解決方案工作的原因是因爲如果你遵循'@ import'語句，你會發現你導入的所有東西都被包裝在mixin中。如果你自己包含了'[foundation]/scss/foundation.scss'，那麼這個mixins就會被聲明，但並沒有被真正使用。 '@include foundation-everything'是一個混合，最終包含所有這些mixin。（如果以這種方式設計基金會有好處，我會很好奇） – Scribblemacher

現在我想到了這一點，我看到了這個優勢。如果您使用@import [foundation]/scss/foundation'，則可以訪問項目中的所有mixin，因此可以使用'@ include'語句包含組件（甚至是組件的一部分）。這給了你很多控制權，這樣你只需要構建你需要的部分，而不是在文件級導入。 – Scribblemacher

基金會進口與Libsass，節點薩斯中間件不是編譯

回答

相關問題