Libsassを使用したFoundationインポート、ノードミスミドルウェアがコンパイルされていない

Question

私のアプリケーションのベースとしてExpressをNode.jsとして使用していて、npmパッケージを使用しようとしています sassコンパイルと財団のサイトの基礎scssのソース。

@import 'foundation'; 

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

body{ 

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

} 

とstuff.scssのようになります：私のレイアウトでは

somerandomtag{ 

    @extend body; 
    border:5px solid black; 

} 

マイ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は次のようになります.jade追加済み

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

私はページを更新すると、私のログに、私は次の出力を参照することができます

GETを/ログイン200 356.910ミリ秒 - 511ソース： F：\ Users \ユーザーtruttプロジェクト\ドキュメント\ \ MyProjectと\ scs \ 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 - -- レンダリング：F：\ Users \ trutt \ Documents \ Projects \ MyProject \ scss \ style.scssソース： F：¥Users¥trutt¥Documents¥Projects¥MyProject¥sc SS \ style.scss DEST： F：ユーザー\ \ truttプロジェクト\ドキュメント\ \ MyProjectと\パブリック\ CSS \ style.cssにGET 200 7.127ミリ/css/style.css - 269

すべてが最終的に得られます

/** 
* 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が継承と同様にコンパイルチェックとインポートテストを介して動作しているようだと証明しました。しかし、...基礎はすべてCSSのルールですか？私は何かを逃したか？

インストールされているパッケージはすべてnpmから直近24時間以内に新しくインストールされたので、最新のnpmパッケージバージョンで作業していると思います。

Answer 1

さまざまなサス/ギルプ/宝石の選択肢で数時間プレイしたところ、問題が見つかりました。

私は、npmパッケージに含まれているfoundation-sitesに含まれているファイルを調べていました。

それは

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

にapp.js

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

のように次のように変更するようだが問題を修正しました。

私はこれがファイルの基礎であると信じています。上記の資産のパスのscssには、

@import '../scss/foundation'; 

@include foundation-everything; 

が含まれています。おそらく、/ scss /フォルダ内の他のファイルにはfoundation-everythingが含まれていない可能性があります。コンパイルされた基礎CSSのマスターインクルードを前提としています。

また、なぜ、どのように動作するのかを前提にしていますが、ExpressでNPM経由でノードサスミドルウェアを使用したFoundationに関するドキュメントは不十分で、この問題は上記の修正で解決されます。