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;
@crapthings
Copy link

this is my config, but i've got error

var ExtractTextPlugin = require("extract-text-webpack-plugin")

var poststylus = require('poststylus')

module.exports = {
    cache: true,
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel', exculde: /node_modules/, query: { presets: ['es2015'], plugins: ['add-module-exports'] } },
            { test: /\.html$/, loader: 'html', exculde: /node_modules/ },
            { test: /\.css$/, loader: 'style!css!postcss', exculde: /node_modules/ },
            // { test: /\.styl$/, loader: 'style!css!stylus', exculde: /node_modules/ }
            { test: /\.styl$/, loader: ExtractTextPlugin.extract('stylus', 'css-loader!stylus-loader'), exculde: /node_modules/ }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app/bundle.css')
    ],
    stylus: {
        use: [poststylus(['autoprefixer', 'postcss-short', 'postcss-sorting', 'postcss-cssnext', 'rucksack-css'])]
    }
}



ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/stylus-loader!./~/css-loader!./~/stylus-loader!./app/test.styl
Module build failed: ParseError: /Volumes/Data/dev/webpack/postcss-test/app/test.styl:6:206
    2| // imports
    3|
    4|
    5| // module
    6| exports.push([module.id, "body {\n  background-color: #fff;\n  color: #f00;\n  color: #00f;\n  color: rgba(111,18,60,0.8);\n  font-size: 12px;\n}\nh1 {\n  -webkit-font-feature-settings: \"c2sc\", \"lnum\";\n          font-feature-settings: \"c2sc\", \"lnum\";\n  font-variant-caps: small-caps;\n  font-variant-numeric: lining-nums;\n}\n.ui-flex {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n.avatar {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n}\n", ""]);
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^
    7|
    8| // exports
    9|

expected "indent", got ";"

    at Parser.error (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:257:11)
    at Parser.expect (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:285:12)
    at Parser.block (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:838:12)
    at Parser.selector (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:1546:24)
    at Parser.ident (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:1373:23)
    at Parser.stmt (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:776:26)
    at Parser.statement (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:683:21)
    at Parser.parse (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/parser.js:234:25)
    at Renderer.render (/Volumes/Data/dev/webpack/postcss-test/node_modules/stylus/lib/renderer.js:80:22)
    at /Volumes/Data/dev/webpack/postcss-test/node_modules/stylus-loader/index.js:149:12
 @ ./~/style-loader!./app/test.styl 4:14-260

@nusson
Copy link

nusson commented Apr 5, 2016

Same kind of error
expected "indent", got ";"

@liquidox
Copy link

I am having this same problem with the combination of Stylus, CSS and ExtractTextPlugin. Any soluion in sight yet?

@webhipster
Copy link

Anyone have a solutions for this issue?

@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