HTML & CSS работает в режиме разработки, но CSS отсутствует в рабочем режиме - PullRequest
Новая
       14

HTML & CSS работает в режиме разработки, но CSS отсутствует в рабочем режиме

0 голосов
/ 02 мая 2020

Я совершенно новичок в этой области. Я прошу прощения за любые ошибки. Я работаю над проектом node js, используя веб-пакет, HTML загрузчик. Я использую зависимость сервера dev для тестирования в localhost. Все модели и виды, а также файлы индекса шаблона. html находятся в папке 'sr c'. Конфигурационный пакет и пакет json и файлы сервера. js находятся в каталоге root. Загрузчик webpack HTML используется для загрузки файла index. html в папку dist. В папке 'dist' есть папка с именем css, внутри которой находится стиль. css. Все работает в режиме разработки, и я могу запустить страницу на моем локальном хосте, но проблема начинается, когда я пытаюсь запустить «npm run start», который фактически включает «сервер узла. js». И затем, когда я пытаюсь получить доступ к странице на локальном хосте, стилизация страницы не работает, но интерактивное поведение страницы работает нормально. Я думаю, что 'href', который связывает css в файле index.htm, неверен. Кто-нибудь знает, что не так в моем коде? Я приложил все изображения и код, который я использую.

src folder

dist folder

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'
                }
            }
        ]
    }
}

пакет. 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"
  }
}

сервер. 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}`);

индекс. 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>

1 Ответ

0 голосов
/ 02 мая 2020

Я не уверен, что это работает, но попробуйте добавить эту строку после ваших маршрутов на сервере. js file: 

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

Также обратите внимание на точку перед / dist

Если это не работает, попробуйте изменить следующую строку в вашем индексе. html: 

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

или 

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