首页 文章

基础导入使用Libsass，node-sass-middleware不编译

提问于
浏览 次
0

我使用Node.js和Express作为我的应用程序的基础，并且我正在尝试使用npm包node-sass-middleware进行基础scss源代码的sass编译和基础站点 .

我的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 /登录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读取：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*/ }

基础本身的 Headers 是可见的，它告诉我我的包含路径正在运行 . 我已经证明Sass似乎通过编译检查和导入测试以及继承来工作 . 但是......所有的基金会css规则在哪里？我错过了什么吗？

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

node.js express zurb-foundation node-sass

1 回答

  • 3

    经过几个小时玩不同的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 /文件夹中的其他文件不包含基础 - 所有内容 . 我假设是编译基础css的主要包含 .

    再次， Build 了关于为什么以及如何工作的假设，但是在Express上通过NPM的node-sass-middleware的文档很少，并且通过上述修改解决了这个问题 .

    回复于

相关问题