时间戳

首页 > 解决方案 > 如何在 React 中从 index.html 引用 css 文件

javascript - 如何在 React 中从 index.html 引用 css 文件

问题描述

我有一个名为 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.log("express listening at localhost:3000");
});

这对我不起作用，它找不到 css 文件，我该如何制作它，以便我可以从 index.html 引用 css 文件。我的 src 文件夹中还有 index.js，它用作运行整个 React 应用程序的入口文件。

标签： javascripthtmlcssreactjs

解决方案

之前添加styles.css的路由 app.get("*",...)

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

推荐阅读