2017-12-14 8 views
2

私は.scssファイルからkoalaで生成された.cssファイルを持っていて、それをindex.htmlに追加しました。このページは私のファイルを提供しません。私のことはエクスプレスサーバ上のファイルを静的ファイルとして追加していないためです。 Iとしてexpress.jsで静的CSSファイルを追加

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

2)

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

1)

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

Iが使用される:私は明示サーバのマニュアルhttp://expressjs.com/es/starter/static-files.htmlに記載されているさまざまなオプションに従うことを試みました使用:

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 

これは私の急行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'); 
}); 

私は私が急行静的なラインを使用する必要がありますどのようにこの特定の例では知っている必要がありますそれを機能させる。私は間違っているの?助けをありがとうございました。

+0

私のwebpack.configファイルは次のようになります。 – saluab

答えて

0

私の最初の推測は、あなたのapp.get('*' ...)が原因だと思います。ワイルドカード*を使用するので、すべての可能なURLに一致します。

それ以降はapp.use('/static', ...)と書かれているので、無視されると思います。

私の2セント:

  • app.get('*', ...)app.static(...)を入れてみてください。
  • あなたがapp.static('/static', express.static(path.join(__dirname, '/styles/css')))を使用している場合は、あなたのHTMLにあなたの<link>タグは次のようになります。それ以外の場合は、単にapp.use(express.static(__dirname))を使用して、HTMLにあなたが全体の<link rel='stylesheet' href='/styles/css/your-css-file.css' type='text/css'>

を持っている必要があり、その中にあることに注意して秩序を保つ<link rel='stylesheet' href='/static/your-css-file.css' type='text/css'>

  • あなたはapp.use(...)の事項であなたのミドルウェアを宣言します。

  • 関連する問題