Question

我有一个名为asset的文件夹，其中有一个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 App的入口文件。

Answer 1

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

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

如何在React中从index.html引用CSS文件

1 个答案: