快速SASS的Automagic编译

我已经习惯Express和各种其他节点相关的框架，因为我觉得它比ASP MVC世界更有趣并且更轻量级......而且我试图做的第一件事之一是将SASS文件自动编译为CSS文件。快速SASS的Automagic编译

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

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

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

我现在设置的是/css/index.css会参考__dirname/static/stylesheets。所以，我的看法玉里面，我有以下块：

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

的意图是，这个环节将引用编译SASS文件。下面是关于萨斯的compilaton和静态内容服务app.js的部分：

// 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'));

我的问题是，什么是实际上情况是，上海社会科学院似乎是编译的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

显然，这并非意，并最终404ing作为浏览器认为我们请求css/index.css但SASS文件被编译成，有效，css/css/index.css。

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

来源

2014-09-13 Dan Pantry

我通过改变我的sass文件到scss的扩展来解决了这个问题。这是唯一的问题。 |：稍微讨厌，因为该软件包名为node-sass。

来源

2014-09-13 16:31:56

快速SASS的Automagic编译

回答

相关问题