Foundation 使用 Libsass 导入，node-sass-middleware 未编译

Question

我正在使用 Node.js 和 Express 作为我的应用程序的基础，并且正在尝试将 npm 包 node-sass-middleware 用于 sass 编译和 foundation-sites 为基础 scss 来源。

我的 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 source: F:\Users\trutt\Documents\Projects\MyProject\scss\style.scss dest: F:\Users\trutt\Documents\Projects\MyProject\public\css\style.css
read: 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 source: F:\Users\trutt\Documents\Projects\MyProject\scss\style.scss dest: F:\Users\trutt\Documents\Projects\MyProject\public\css\style.css GET /css/style.css 200 7.127 ms - 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 本身的 header 是可见的，这告诉我我的包含路径正在工作。我已经证明 Sass 似乎可以通过编译检查和导入测试以及继承来工作。但是...所有基础 css 规则在哪里？我错过了什么吗？

所有安装的包都是在过去 24 小时内直接从 npm 全新安装的，所以我假设我正在使用最新的 npm 包版本。

Answer 1

在尝试了几个不同的 sass/gulp/gem 选项后，我发现了我的问题。

我正在探索 npm 包中包含的基础站点中包含的文件。

似乎在 app.js

中更改以下内容

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

至

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

已解决问题。

我相信这是因为上述资产路径中的文件foundation.scss包含

@import '../scss/foundation';

@include foundation-everything;

我认为底线是造成差异的原因。 /scss/ 文件夹中的其他文件可能不包含 foundation-everything。我认为这是编译基础 css 的主包含。

再一次，建立了关于为什么以及如何工作的假设，但是通过 Express 上的 NPM 使用 node-sass-middleware 的 Foundation 文档很少，这个问题通过上述修改得到解决。

Foundation 使用 Libsass 导入，node-sass-middleware 未编译

Foundation imports with Libsass, node-sass-middleware not compiling

node.js

express

zurb-foundation

node-sass