Question

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

但它仍然不起作用

Answer 1

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

从文档引用：

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

如果使用快递，只需添加：

 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的文件。似乎没有更改扩展名的选项。

Answer 2

如果您使用快速发电机，请尝试

Bar Item

Answer 3

以下是基于各种来源的解决方案，包括上面的主题/评论：

<强>节点

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

Answer 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                
     })
 );

如何使用Express安装SASS？

4 个答案: