使用 Express 自动编译 SASS答案

【问题标题】：Automagic compilation of SASS with Express使用 Express 自动编译 SASS
【发布时间】：2014-09-13 13:31:40
【问题描述】：

我已经习惯了 Express 和其他各种与节点相关的框架，因为我发现它比 ASP MVC 世界更有趣且更轻量级。我要做的第一件事就是让 SASS 文件自动编译到 CSS 文件中。

我已经找到了一些方法并安装了node-sass 并遵循了一些教程，但我并没有完全得到我想要的结果。首先，这是我的目录结构。

app.js
    static/
        stylesheets/
        images/
        js/
    sass/
        index.sass
    views/
        index.jade

所以我的计划相当简单：当我在浏览器中访问views/index.jade 时，我希望index.jade 渲染static/stylesheets/index.css - 显然，这在编译时不存在，但我们有对应的index.scss sass 中的文件。

我目前的设置是/css/index.css 将引用__dirname/static/stylesheets。所以，在我的玉视图中，我有以下块：

block head
    link(href='/css/index.css', rel='stylesheet')

目的是这个链接将引用已编译的 sass 文件。下面是 app.js 中关于 sass 编译和静态内容服务的部分：

// Enable SASS compilation
app.use(sass.middleware({
    src: __dirname + '/sass',
    dest: __dirname + '/static/stylesheets',
    debug: true,
    outputStyle: 'compressed'
}));

// Add static content
app.use('/js', express.static(__dirname + '/static/js'));
app.use('/img', express.static(__dirname + '/static/img'));
app.use('/css', express.static(__dirname + '/static/stylesheets'));

我的问题是 实际上 发生的事情是 SASS 似乎可以很好地编译 css，但由于 @我在上面使用过的 987654333@ 路线。也许调试输出会更有意义：

 source : E:\project\sass\css\index.scss
 dest : E:\project\static\stylesheets\css\index.css
 read : E:\project\static\stylesheets\css\index.css

显然，这不是故意的，最终会出现 404，因为浏览器认为我们正在请求 css/index.css，但 SASS 文件实际上正在编译为 css/css/index.css。

我应该在这里做什么？我认为我犯了一个明显的错误，但我看不到它，因为我是 node/express 的新手。

【问题讨论】：

标签： node.js express node-sass

【解决方案1】：

我通过将 sass 文件的扩展名更改为 scss 来解决此问题。那是唯一的问题。 |：考虑到包名为node-sass，有点烦人。

【讨论】：