使用NodeJSExpress和node-sass获取SASS以进行自动编译-GetSASStoautocompilewithNodeJSExpressandnode-sass

You may want to have the compiled output in the stylesheets folder, rather than the public one; like so:

您可能希望将已编译的输出放在stylesheets文件夹中，而不是公共文件夹;像这样：

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss

This way, the view will link to the css files like so:

这样，视图将链接到css文件，如下所示：

link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")

However, if you change the sass middleware configuration to

但是，如果您将sass中间件配置更改为

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

things will go pear shape.

事情会变成梨形。

When linking to the css file like so:

当链接到css文件时，如下所示：

link(rel="stylesheet", href="stylesheets/app.css")

the resultant request will be for stylesheets/app.css. But since we gave the sass middleware the following config:

结果请求将用于stylesheets / app.css。但是因为我们给了sass中间件以下配置：

src: __dirname + '/sass',

it will go and look for /sass/stylesheets/app.scss, and no such file exists.

它会去寻找/sass/stylesheets/app.scss，并且不存在这样的文件。

One solution is to keep the config as is, but the put all sass files in the subfolder `/sass/stylesheets/. But there is a better solution.

一种解决方案是保持配置不变，但将所有sass文件放在子文件夹`/ sass / stylesheets /中。但是有一个更好的解决方案。

If you define a prefix config like so:

如果您定义前缀配置，如下所示：

app.use(
    sass.middleware({
        src: __dirname + '/sass', 
        dest: __dirname + '/public/stylesheets',
        prefix:  '/stylesheets',                    // We've added prefix
     })
);  

it will tell the sass compiler that request file will always be prefixed with /stylesheets and this prefix should be ignored, thus for a request for /stylesheets/app.css, the sass middleware will look for the file /sass/app.scss rather than /sass/stylesheets/app.scss.

它将告诉sass编译器请求文件将始终以/ stylesheets为前缀，并且应该忽略此前缀，因此对于/stylesheets/app.css的请求，sass中间件将查找文件/sass/app.scss而不是比/sass/stylesheets/app.scss。

app.js

app.js

var express = require('express'),
    routes  = require('./routes'),
    sass    = require('node-sass'),
    path    = require('path');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);

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

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

});

layout.jade

layout.jade

doctype html
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="/stylesheets/app.css")
  body!= body

Folders and files

文件夹和文件

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss