Question

我使用.scss文件中的koala生成了一个.css文件，我在index.html中添加了它。该页面无法提供我的文件，我了解到它是因为我没有将我的快速服务器上的文件添加为静态。我尝试按照快速服务器文档http://expressjs.com/es/starter/static-files.html上列出的不同选项进行操作：

1）

app.use(express.static('public'));

我用过：

app.use(express.static('styles/css'));

2）

app.use('/static', express.static('public'));

我用过：

app.use('/static', express.static('styles/css'));

3）

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

我用过：

app.use('/static', express.static(__dirname + '/styles/css'));

但非工作我尝试了不同的组合，我一定是做错了。

这是我的文件夹路径：

project
  src
   styles
      bower_components
      css
         app.css
      sass
         app.sass
   app.js
   index.html
  package.json
  server.js
  webpack.config.js

这是我的express server.js文件：

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config');

const app = express();
const compiler = webpack(config);
const middleware = webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
  stats: { colors: true },
});

app.use(middleware);
app.use(webpackHotMiddleware(compiler));

app.get('*', (req, res) => {
  const renderHtml = () => middleware.fileSystem
    .readFileSync(path.join(compiler.outputPath, 'index.html'))
    .toString();
  res.send(renderHtml());
});

app.use('/static', express.static(path.join(__dirname, '/styles/css')))

app.listen(3000, '0.0.0.0', function (err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://0.0.0.0:3000');
});

我需要知道在这个特定的例子中我应该如何使用快速静态线来使其工作。我做错了什么？提前感谢您的帮助。

Answer 1

我的第一个猜测是你的app.get('*' ...)是罪魁祸首。由于您使用通配符*，因此它匹配每个可能的URL。

既然你之后加了app.use('/static', ...)，我认为它会被忽略。

我的两分钱：

尝试将app.static(...) 放在 app.get('*', ...)之前。
如果您使用app.static('/static', express.static(path.join(__dirname, '/styles/css')))，则在您的HTML中，您的<link>标记应如下所示：<link rel='stylesheet' href='/static/your-css-file.css' type='text/css'>
否则，只需使用app.use(express.static(__dirname))即可在HTML中使用<link rel='stylesheet' href='/styles/css/your-css-file.css' type='text/css'>

总的来说，请记住，使用app.use(...)声明中间件的顺序非常重要。

使用express.js添加静态css文件

1 个答案: