Экспресс-путь отсутствует после обновления - PullRequest
Новая
       11

Экспресс-путь отсутствует после обновления

0 голосов
/ 21 мая 2018

/styles.css пропадает после обновления страницы.

Вот мой package.json скрипт сборки: 

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "rimraf dist",
    "start": "nodemon -e js,css,handlebars -i scss --watch app --exec babel-node app/app.js",
    "build": "npm run clean && mkdir -p dist && babel app -s -D -d dist",
    "serve": "node dist/app.js",
    "postinstall": "npm run build"
  },

Проблема существует только в версии dist.
Я запускаю npm run build, затем npm run serve.
. Это позволяет создать и скопировать каждый файл в папку /dist.
Приложение обслуживается в /dist/app.js.

Итак /styles.css загружается при начальной загрузке, но последующие загрузки показывают, что запрос отменен.Пробовал загружать сайт с приватным окном, но проблема сохраняется.Он загружает только один раз снова после перезагрузки сервера.

снимок экрана запроса

Вот app.js: 

import bodyParser from 'body-parser'
import express from 'express'
import exphbs from 'express-handlebars'
import path from 'path'
import sassMiddleware from 'node-sass-middleware'

const PORT = process.env.PORT || 3000

const app = express()

// Config
app.locals.config = require('./config.json')

// Views and handlebars view engine
const hbs = exphbs.create({
    defaultLayout: 'main',
    layoutsDir: 'app/views/layouts',
    helpers: {
        sitename: function () {
            return app.locals.config.sitename
        },
        ga: function () {
            if (process.env.NODE_ENV === 'production') {
               ...
            }
        },
    },
})
app.engine('handlebars', hbs.engine)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'handlebars')

// Body parser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))

// Sass middleware
app.use(sassMiddleware({
    src: path.join(__dirname, 'public/scss'),
    dest: path.join(__dirname, 'public/css'),
    outputStyle: 'compressed',
    sourceMap: true,
}))

// Static folder
app.use(express.static(path.join(__dirname, 'public')))

// Routes
app.use(require('./routes/index.js'))

const server = app.listen(PORT, () => console.log(`listening at port ${PORT}...`))

Я загружаю /styles.css с этим в моем представлении шаблона: 

<link rel="stylesheet" href="/styles.css">

Обновление и решено:

Я должен был добавить, что моя структура папок выглядит следующим образом: 

/app
  - public/
    - css
    - js
    - scss
  - routes/
    - ...
  - views/
    - ...

Решил проблему, изменив путь src в шаблоне представлений: 

<link rel="stylesheet" href="/css/styles.css">

Пришлось добавить prefix к node-sass-middleware слишком для локальной разработки. 

// Sass middleware
app.use(sassMiddleware({
    src: path.join(__dirname, 'public/scss'),
    dest: path.join(__dirname, 'public/css'),
    prefix: '/css',
    outputStyle: 'compressed',
    sourceMap: true,
}))
...