Serving css in express + webpack server

Question

I'm really struggling serving a static file in Express + Webpack. The file is a plain css stylesheet, but I can't get the html page to load it.

Here's my current configuration:

server.js

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

var app = new express()
var port = 3005

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

// this should tell express that files located under the /public/ folder are static
app.use(express.static(__dirname + '/public'));

app.use(function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

A quite standard webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }]
  }
}

---

Here's the css inclusion in the index.html file:

<link ref="stylesheet" type="text/css" href="/styles/style.css">

I have the style.css file located in public/styles/style.css, so I should see it, right?

In fact, if I go to http://localhost:3005/styles/style.css the file is available and served correctly, however trying to load it through index.html does not work. It seems like the network request is never sent.

Any idea on how to fix this? Am I missing something basilar about express/webpack?

I'm also using react-router, if this may ever be relevant to the issue.

Answer 1

I managed to fix it:

Just installed the appropriate npm packages css-loader and style-loader and added the appropriate loaders to webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    alias: {
      'styles': path.join(__dirname, 'styles'),
    },
    extensions: ['', '.js', '.jsx', '.css']
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.css?$/,
      loaders: [ 'style-loader', 'css-loader' ],
      include: __dirname
    }]
  }
}

Also worth noting that I moved the css file from public/styles to styles.

Upon fixing this and adding the appropriate import 'styles/dashboard.css' to index.js everything works fine now! Loading the file from html <link ref="stylesheet" type="text/css" href="/styles/style.css"> is useless, since is bundled inside the main javascript file.