28

我正在使用 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
  });
});

但它仍然不起作用

4

4 回答 4

29

您需要使用 sass 中间件，例如这个.

引用文档：

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 是一个更好的主意。

更新

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

于 2013-01-09T17:08:55.197 回答
11

如果您使用的是 express-generator 然后尝试

express --view=ejs --css=sass
于 2017-09-03T10:10:21.523 回答
4

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

节点：

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文件会出现的地方）

根目录/sass/main.scss

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

节点 sass 示例

这里：

使用前缀的节点 sass 示例

于 2014-10-09T12:00:07.463 回答
3

看起来 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                
     })
 );
于 2019-02-24T17:14:54.157 回答