私は自分のアプリのベースとして Express で Node.js を使用しており、sass コンパイルには npm パッケージnode-sass-middlewareを使用し、基盤 scss ソースにはfoundation-sitesを使用しようとしています。
私の 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;
}
私のlayout.jadeに追加しました
link(rel='stylesheet', href='/css/style.css')
ページを更新すると、ログに次の出力が表示されます。
GET /login 200 356.910 ms - 511 ソース: F:\Users\trutt\Documents\Projects\MyProject\scss\style.scss 宛先: 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 - - レンダリング: F:\Users\trutt\Documents\Projects\MyProject\scss\style.scss ソース: F:\Users\trutt\Documents\Projects\MyProject\scss\style.scss 宛先: F:\Users\trutt\Documents\Projects \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*/ }
Foundation 自体のヘッダーが表示され、インクルード パスが機能していることがわかります。私は、Sass がコンパイル チェックとインポート テスト、および継承によって機能しているように見えることを証明しました。しかし...すべての基礎CSSルールはどこにありますか? 私は何かを逃しましたか？
インストールされたすべてのパッケージは、過去 24 時間以内に npm から直接新しくインストールされたので、最新の npm パッケージ バージョンで作業していると思います。