javascript – node-sass-middleware只提供一次css文件

2019年8月6日 166次阅读

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

app.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

谢谢！

最佳答案 我意识到这是一个古老的问题,可能已经通过其他方式回答了一段时间,但我看到了类似的问题,只是想回答它的记录.如果您正在提供公用文件夹,那么您的文件路径实际上应该是/styles/main.css.将您的前缀选项更改为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链接本身交互.每当请求静态文件时,它会查看它所带来的文件路径并将其粘贴到src和dest URL的末尾.如果您根本没有定义前缀选项,那就是这样.

没有前缀：

《javascript – node-sass-middleware只提供一次css文件》

带前缀：

《javascript – node-sass-middleware只提供一次css文件》

前缀只是忽略我的CSS< link>的/ css部分. URL并允许绝对路径对src和dest准确.

点赞