node-sass-middleware 未编译答案

【问题标题】：node-sass-middleware not compilingnode-sass-middleware 未编译
【发布时间】：2015-02-17 17:08:18
【问题描述】：

我试图让 node-sass-middleware 与 express 一起工作。该应用程序运行没有错误

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

var routes = require('./routes/index');

var app = express();

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
//---- LOAD SASS -----//
// adding the sass middleware
var srcPath = __dirname + '/scss';
var destPath = __dirname + '/public/stylesheets';
app.use(sassMiddleware({
  src: srcPath,
  dest: destPath,
  debug: true,
  outputStyle: 'compressed'
}));

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

任何人都可以看出我尝试编译 sass 的方式有什么问题吗？

文件结构：

app
controllers
routes
public
-stylesheets
scss
...

【问题讨论】：

您使用的是什么版本的 Express？例如，他们使用的 package.json 连接 2.7.9。约定发生了很大变化，因此您可能必须执行类似 app.use(sassMiddleware({ src: srcPath, dest: destPath, debug: true, outputStyle: 'compressed' })());

标签： node.js express sass

【解决方案1】：

app.js 应该是这样的：

app.use(sassMiddleware({
  src: srcPath,
  dest: destPath,
  debug: true,
  outputStyle: 'compressed'
}),
express.static(path.join(__dirname, 'public')));

此外，您的主 scss 文件应命名为 style.scss 并位于 scss/stylesheets/ 目录中。

如果您正确加载了模块，您应该会看到这样的日志：

  source : /Users/abc/Desktop/SO/SO_node/scss/stylesheets/style.scss
  dest : /Users/abc/Desktop/SO/SO_node/public/stylesheets/stylesheets/style.css
  read : /Users/abc/Desktop/SO/SO_node/public/stylesheets/stylesheets/style.css
  render : /Users/abc/Desktop/SO/SO_node/scss/stylesheets/style.scss

【讨论】：

您的解决方案非常有效。具有讽刺意味的是，几乎不存在node-sass-middleware 用法的正确结构示例！这是我找到的唯一例子！
主要问题是 *.scss 文件的路径。重名“scss/stylesheets/”
将 express.static 调用移到 sass-middleware 调用下面对我有用，谢谢！

【解决方案2】：

最好选择 grunt-sass。简单的配置、自动化的任务（感谢 grunt）以及更快的编译时间，因为 libsass 是用于 SASS 的原始 Ruby 编译器的 C 版本。在 0.3 秒而不是 3 秒内编译 sass/scss 文件。

【讨论】：

【解决方案3】：

一个问题也可能是你想编译scss

而不是sass。因此将indentedSyntax 设置为false。

app.use(require('node-sass-middleware')({
  src: path.join(__dirname, 'scss'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax : false,
  sourceMap: true
}));

或者完全删除它。 Express-generator 默认添加此值。

【讨论】：