node-sass-middleware, обслуживающий файл CSS только один раз

Question

Я сделал очень простой сайт 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

Спасибо!

Answer 1

Я понимаю, что это старый вопрос, и на него, возможно, уже давным-давно ответили другими способами, но я вижу похожие проблемы по этому поводу и просто хотел ответить на него для протокола. Если вы отбываете public папка, то ваш путь к файлу на самом деле должен быть /styles/main.css, Измени свой prefix вариант просто /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-адрес. Это если вы не определите prefix вариант вообще.

Без prefix:

С prefix:

prefix просто игнорирует /css часть моего CSS <link> URL и позволяет быть точным для абсолютного пути src а также dest,

Answer 2

Что, кажется, вызывает проблему,

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 перенесен, теперь он статичен, так что теперь внутренне экспресс вызов src как /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')
);

и изменить linksrc в

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

Надеюсь это поможет