Как сослаться на файл css из index.html в React

У меня есть папка с именем assets, в которой есть styles.css, а затем у меня есть index.html, на который я хотел бы сослаться на styles.css, но по какой-то причине это невозможно.

Мое текущее решение таково:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8" />
        <title>My App</title>
        <link rel = "stylesheet" href = "/styles.css">

    </head>
    <body>
        <div id = "app"></div>
        <script type = "text/javascript" src = "/bundle.js"></script>
    </body>
</html>

И у меня есть сервер узла, работающий так:

var webpack = require("webpack");
var config = require("./webpack.config.js");

var http = require('http');
var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
var path = require('path');

const compiler = webpack(config);


app.use(require("webpack-dev-middleware")(compiler, {
  noInfo: true,
  publicPath: "/"
}));

app.use(require("webpack-hot-middleware")(compiler));

app.use('/auth', proxy('http://localhost:8081', {changeOrigin: true}));
app.use('/api', proxy('http://localhost:8081', {changeOrigin: true}));

app.get("*", function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

/**
 * Anything in public can be accessed statically without
 * this express router getting involved
 */

app.use(express.static(path.join(__dirname, 'assets'), {
  dotfiles: 'ignore',
  index: false
}));

var server = http.createServer(app);
server.listen(3000, function() {
  console.info("express listening at localhost:3000");
});

Это не работает для меня, он не может найти файл css, как я могу сделать это, чтобы я мог ссылаться на файл css из index.html. Также у меня есть index.js в моей папке src, которая используется как входной файл для запуска всего приложения React.

Когда вы открываете веб-консоль и переходите на вкладку сети, загружается ли файл css?

— 19.10.2018 23:17

я вижу в списке, но его ответ просто пустой

— 19.10.2018 23:20

попробуйте <link rel = "stylesheet" href = "/ assets / styles.css">

— 19.10.2018 23:21

javascript html css reactjs

19.10.2018 23:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

573

Ответы 1

Добавьте маршрут для styles.css перед app.get("*",...)

app.get("/styles.css", function(req, res) {
  res.sendFile(__dirname + '/styles.css');
});

Требуется дополнительная отладочная информация: структура ваших каталогов, вывод консоли.

— 21.10.2018 21:11

19.10.2018 23:19

Другие вопросы по теме

Toastr и FontAwesome 5 не отображают правильный значок в сообщении об успехе

Как получить элемент до и после класса с помощью JavaScript в HTML?

Как центрировать анимированный индикатор прокрутки вниз на изображении, но между травой и полом

Как получить ввод в теге textarea с помощью JavaScript?

Проблема с командами Power Shell get-content и add-content

Play () не работает при изменении источника HTML <video> на мобильном устройстве

Центрирование нескольких текстов с помощью flexbox

Переходы страниц для простых сайтов HTML?

CSS-позиционирование и выравнивание

Размещение div один под другим с разной высотой (мегаменю)

Как сослаться на файл css из index.html в React

Ответы 1

Другие вопросы по теме

Похожие вопросы