HTML & CSS 在开发模式下工作，但在生产模式下缺少 CSS答案

【问题标题】：HTML & CSS works in the development mode but CSS is missing in the production modeHTML & CSS 在开发模式下工作，但在生产模式下缺少 CSS
【发布时间】：2020-08-16 19:54:18
【问题描述】：

我是这个领域的新手。对于任何错误，我深表歉意。我正在使用 webpack、HTML 加载器开发一个节点 js 项目。我正在使用开发服务器依赖项在本地主机中进行测试。所有模型和视图以及模板 index.html 文件都位于“src”文件夹中。 webpack 配置和包 json 以及 server.js 文件位于根目录中。 webpack HTML 加载器用于加载 'dist' 文件夹中的 index.html 文件。在“dist”文件夹中，有一个名为 css 的文件夹，其中 style.css 位于其中。一切都在开发模式下工作，我可以在我的本地主机中运行该页面，但是当我尝试运行实际上包括“node server.js”的“npm run start”时问题就开始了。然后当我尝试访问本地主机中的页面时，页面的样式不起作用，但页面的交互行为工作正常。我认为，链接 index.htm 文件中的 css 的“href”不正确。有人知道我的代码有什么问题吗？我已经附上了我正在使用的所有图像和代码。

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: ['./src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer:{
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

package.json 文件

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "dev-start": "webpack-dev-server --mode development --open",
    "heroku-postbuild": "webpack --mode production",
    "start": "node server.js"
  },
  "author": "Sayeedur Rahman",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "fractional": "^1.0.0",
    "regenerator-runtime": "^0.13.5",
    "uniqid": "^5.2.0"
  },
  "engines": {
    "node": "12.16.1",
    "npm": "6.13.4"
  }
}

server.js 文件

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + '/dist'));

app.get('/', (req, res) =>{
    res.sendFile(path.resolve(__dirname, '/dist', 'index.html'))
});

app.listen(port);
console.log(`server started on ${port}`);

index.html 文件部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
    <title>forkify // Search over 1,000,000 recipes</title>
</head>

【问题讨论】：

标签： html css node.js express webpack-4

【解决方案1】：

我不确定这是否有效，但请尝试在 server.js 文件中的路由之后添加此行：

app.use(express.static(path.resolve(__dirname, './dist')));

还要注意 /dist 前面的点

如果这不起作用，请尝试更改 index.html 中的以下行：

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

或

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

【讨论】：