4

我制作了一个使用 Jade 和 Sass 的非常简单的 Express 网站，但我的 node-sass 中间件遇到了问题。我的服务器只提供一次 CSS 文件，然后为每个后续请求返回 404。我必须重新启动服务器才能临时修复它。这是我的代码；输出css文件后服务器似乎挂起（也许，我不确定..）

应用程序.js：

var express = require('express'), sassMiddleware = require('node-sass-middleware');

var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.use(
    sassMiddleware({
        src: __dirname + '/public/styles/sass',
        dest: __dirname + '/public/styles',
        debug: true,
        outputStyle: 'compressed',
        prefix: '/public/styles'
    }),
    express.static(__dirname + '/public'),
    express.logger('dev')
);

app.get('/', function(req, res){
    res.render('index', { 
        title: 'Home' 
    });
});

app.listen(3000);

这是我服务器的日志：

source: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss
dest: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css
read: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css
render: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss

source: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss
dest: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css

日志的前 4 行是我的第一个请求，接下来的两行来自我的第二个请求（刷新页面），但失败了。

最后，这是我的 Jade 模板

doctype
html
  head
    title #{title} - isitjoysbirthday
    link(rel='stylesheet', href='/public/styles/main.css')
  body
    .container
      .main-content
        block content

谢谢！

4

2 回答 2

3

导致问题的原因似乎是，

app.use(
    sassMiddleware({
        src: __dirname + '/public/styles/sass',
        dest: __dirname + '/public/styles',
        debug: true,
        outputStyle: 'compressed',

        /*you are removing public here (prefix tells the server that what ever
          request for CSS comes, remove '/public/styles' from it's src*/

        prefix: '/public/styles' 

    }),
express.static(__dirname + '/public'),//Now here you are telling it too look
                                      //for all static files in 'public' it will
                                     // prepend '/public' before every static src
express.logger('dev')
);

第一次服务器运行

服务器第一次运行 CSS 不是静态的，因为它需要被转译成 CSS，这样才能顺利转译和提供服务。现在，当请求文件时，node-sass 会'/public/styles'轻松删除并提供它。

刷新时

现在 CSS 已经被转译，它现在是静态的，所以现在内部表达调用你的srcas/public/public/styles/main.css肯定不存在（尝试创建这样的目录，你肯定会知道）

解决方案

您的代码的解决方案很简单，

app.use(
    sassMiddleware({
        src: __dirname + '/public/styles/sass',
        dest: __dirname + '/public/styles',
        debug: true,
        outputStyle: 'compressed',

        prefix: '/styles' //remove '/public' from here

    }),
express.static(__dirname + '/public'),
express.logger('dev')
);

并更改link src为

link(rel='stylesheet', href='/styles/main.css')

希望这对像我这样的其他人有所帮助，我只花了 4 个小时试图为我自己解决这个问题，我就在这里。此外，我想建议您使用serve-static而不是express.static()，因为我在serve-static这里测试过它是包含它的代码，

//place this where you include node modules
var serveStatic = require('serve-static');

//place following code instead of express.static()
app.use('/', serveStatic('./public'));

希望这可以帮助

于 2017-01-26T21:38:51.960 回答
3

我意识到这是一个老问题，可能已经在不久前通过其他方式得到了回答，但我看到了类似的问题，只是想作为记录来回答。如果您正在提供public文件夹，那么您的文件路径实际上应该是/styles/main.css. 将您的选项更改prefix为 just/styles并将您的 HTML 更改为<link href='/styles/main.css'>.

这是我的一个有效的示例设置。

目录结构：

static
  |
  - css
  |
  - scss

中间件设置：

  app.use(sassMiddleware({
    src: __dirname + '/static/scss',
    dest: __dirname + '/static/css',
    debug: false,
    prefix: '/css',
    outputStyle: 'compressed'
  }));
  app.use('/', serveStatic('./static', {}));

HTML：

<link rel='stylesheet' href='/css/app.css'>

奖金：

serveStatic将始终提供此服务/css/my_css_file.css，但问题是中间件如何与 HTML 链接本身交互。每当请求静态文件时，它都会查看它附带的文件路径并将其粘贴到 URLsrc和destURL 的末尾。这是如果您根本没有定义prefix选项。

没有prefix：

没有适当的前缀

与prefix：

带有适当的前缀

prefix只是忽略了/css我的 CSS URL 的一部分，并<link>允许绝对路径对于src和是准确的dest。

于 2016-04-25T06:42:20.620 回答