Skip to content

Instantly share code, notes, and snippets.

@andrewluetgers
Created February 5, 2015 16:38
Show Gist options
  • Save andrewluetgers/927fb8a8651d7a713365 to your computer and use it in GitHub Desktop.
Save andrewluetgers/927fb8a8651d7a713365 to your computer and use it in GitHub Desktop.
Webpack + React + Stylus, Dev: Hotloat, Build: File Output
var webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
isDev = process.env.NODE_ENV;
var config = {
cache: true,
resolve: {
extensions: ["", ".js", ".css", ".styl"]
},
entry: [
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/dev-server',
'./src/app.js'
],
output: {
path: path.join(__dirname, '/build/'),
filename: 'app.js',
publicPath: 'http://localhost:3001/assets/'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'jsx?harmony']},
{test: /\.css$/, loader: isDev
? "style-loader!css-loader"
: ExtractTextPlugin.extract("css", "css-loader")},
{test: /\.styl$/, loader: isDev
? "style-loader!css-loader!stylus-loader"
: ExtractTextPlugin.extract("stylus", "css-loader!stylus-loader")}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
isDev ? new ExtractTextPlugin("app.css", {allChunks: true}) : ""
]
};
if (process.env.NODE_ENV === "dev") {
config.devtool = 'eval'; // This is not as dirty as it looks. It just generates source maps without being crazy slow.
}
module.exports = config;
@SimpleZn
Copy link

SimpleZn commented Feb 9, 2017

I found this to fix it.
webpack-contrib/stylus-loader#80

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment