Unable to generate CSS files from SCSS using ExtractTextWebpackPlugin on Dev server

Bug/improvement

Chapter: 4/8

I wanted to be able to use custom SCSS for my application rather than the inline JSS styles. However when i tried to set up ExtractTextWebpackPlugin I am unable to generate a CSS file when running yarn dev:start.

yarn dev:wds does not throw any errors but the CSS file ends up giving me a 404 in the console.

Webpack file:


// @flow

import path from 'path'
import webpack from 'webpack'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

import { WDS_PORT } from './src/shared/config'
import { isProd } from './src/shared/util'

export default {
  entry: [
    'react-hot-loader/patch',
    './src/client',
  ],
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract('css-loader!sass-loader'),
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
  devtool: isProd ? false : 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    port: WDS_PORT,
    hot: true,
  },
  plugins: [
    new ExtractTextPlugin({
      filename: isProd ? '/static/main.css' : `http://localhost:${WDS_PORT}/dist/css/main.css`,
      allChunks: true,
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

render-app file

// @flow

import { APP_CONTAINER_CLASS, STATIC_PATH, WDS_PORT } from '../shared/config'
import { isProd } from '../shared/util'

const renderApp = (title: string) =>
`<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="${STATIC_PATH}/css/bootstrap.min.css">
    <title>${title}</title>
    <link rel="stylesheet" href="${isProd ? STATIC_PATH : `http://localhost:${WDS_PORT}/dist`}/css/main.css">
  </head>
  <body>
    <div class="${APP_CONTAINER_CLASS}"></div>
    <script src="${isProd ? STATIC_PATH : `http://localhost:${WDS_PORT}/dist`}/js/bundle.js"></script>
  </body>
</html>
`

export default renderApp

verekia / js-stack-from-scratch

Unable to generate CSS files from SCSS using ExtractTextWebpackPlugin on Dev server #212

Bug/improvement

Chapter: 4/8