如何使用 Express 安装 SASS？答案

【问题标题】：How do you install SASS with Express?如何使用 Express 安装 SASS？
【发布时间】：2012-12-23 22:22:21
【问题描述】：

我正在使用 Express 和 socket.io 创建一个 node.js 应用程序。我想使用 SASS，我看到有一个 npm 包，我不明白如何在 SASS npm 和应用程序之间链接并使其解析 SASS？

更新：我使用 SASS 中间件https://github.com/andrew/node-sass 安装并包含它，方式如下：

  sass = require('node-sass');


app.configure(function(){
  app.set('port', process.env.PORT || 3000);

  /* other stuff */

  sass.middleware({
    src: __dirname + '/public/stylesheets/sass',
    dest: __dirname + '/public/stylesheets',
    debug: true
  });
});

但是还是不行

【问题讨论】：

不完全是OP要求的（因此不是答案），但是为了后代，Express通过express-generator包提供了一个生成器，你可以运行express --css compass，生成器会自动设置up Express 与 Compass。我看不出使用 Sass 而不是 Compass 的理由。

标签： node.js express sass

【解决方案1】：

您需要使用 sass 中间件，例如this one。

引用文档：

var server = connect.createServer(
   sass.middleware({
       src: __dirname
       , dest: __dirname + '/public'
       , debug: true
    }),
   connect.static(__dirname + '/public')
);

如果使用express，只需添加：

 app.use(
     sass.middleware({
         src: __dirname + '/sass', //where the sass files are 
         dest: __dirname + '/public', //where css should go
         debug: true // obvious
     })
 );

您的app.configure() 电话。

当然，在生产系统上，将 sass 预编译为 css 是一个更好的主意。

更新

在上面的示例中，中间件将在 __dirname + '/sass/css' 中查找 sass 文件。默认情况下，它还会查找扩展名为 .scss 的文件。似乎没有更改扩展名的选项。

【讨论】：

在app.configure 调用内或任何你配置了中间件的地方
如果您不确定它在哪里，请查找app.use 电话
@IlyaD 在中间件配置中src 属性指向的目录中（Web 应用根目录中的/sass 子目录）
我使用了dest: __dirname + '/public/stylesheets/sass',，但没有任何反应。我是 Express 的新手，所以有什么我遗漏的吗？我怎么知道它甚至试图编译它？（感谢帮助:)
@IlyaD 将其用作 src。 dest 是编译后的 css 所在的位置。

【解决方案2】：

如果你使用的是 express-generator 那就试试吧

express --view=ejs --css=sass

【讨论】：

【解决方案3】：

这是一个基于各种来源的解决方案，包括上面的线程/cmets：

节点：

var connect = require('connect');
var sass = require('node-sass');

var srcPath = __dirname + '/sass';
var destPath = __dirname + '/public/styles';

var server = connect.createServer(
    sass.middleware({
        src: srcPath,
        dest: destPath,
        debug: true,
        outputStyle: 'expanded',
        prefix: '/styles'
    }),
    connect.static(__dirname + '/public')
);

html：

<!DOCTYPE html>
    <html>
    <head>
         <link rel="stylesheet" type="text/css" href="styles/main.css">
etc

文件系统：

rootDirectory / server.js（这是节点应用）

rootDirectory/public/styles/（这里是编译好的scss文件会出现的地方）

rootDirectory/sass/main.scss

这对我有用，我已经在以下位置分叉了示例：

node-sass-example

这里：

node-sass-example using prefix

【讨论】：

Pull-request 已被接受，因此 node-sass-example 现在应该反映我的更改。

【解决方案4】：

看起来 Express 的实现发生了一些变化。我不得不这样做：

npm install node-sass-middleware --save

然后

var sass = require('node-sass-middleware');

 app.use(
     sass({
         src: __dirname + '/sass',    // Input SASS files
         dest: __dirname + '/public', // Output CSS
         debug: true                
     })
 );

【讨论】：