node-sass-middleware无法编译

Question

我在尝试使用 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
...

- Aidan Gee

---

你使用的Express版本是什么？例如，他们在package.json中使用的是connect 2.7.9。约定已经发生了很大变化，因此您可能需要执行类似于app.use（sassMiddleware（{src：srcPath，dest：destPath，debug：true，outputStyle：'compressed'}）（））;这样的操作。 - jusynth

Answer 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

- Rahat Mahbub

---

你的解决方案非常有效。真讽刺，几乎没有关于正确使用node-sass-middleware结构的示例！这是我找到的唯一一个例子！ - Farzad Yousefzadeh

主要问题是*.scss文件的路径。重复的名称“scss/stylesheets/”。 - Volodymyr

将 express.static 调用移到 sass-middleware 调用下面，这对我有帮助，谢谢！ - SuperColin

Answer 2

问题可能是您想编译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默认添加此值。

- kenny

Answer 3

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

- Thomee