0

我已经习惯了 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，但由于我在上面使用/css/的路线，它会将所有内容都添加到一个文件夹（不存在）中。/css也许调试输出会更有意义：

 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 的新手。

4

1 回答 1

0

我通过将我的 sass 文件的扩展名更改为 scss 来解决此问题。那是唯一的问题。|：鉴于包名为node-sass.

于 2014-09-13T16:31:56.523 回答