Question

刷新页面后，

/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加载初始加载，但后续加载显示请求被取消。尝试使用私人窗口加载网站，但问题仍然存在。重新加载服务器后，它再次加载。

screenshot of request

此处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,
}))

刷新后缺少快速路径

更新并解决：

0 个答案: