【参考】Stylusを使うWebpackの設定【マージしないで】

sample_webpack/package.json

@@ -24,6 +24,8 @@
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "style-loader": "^0.13.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.3.1",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1"
   }

sample_webpack/src/App.js

@@ -4,6 +4,8 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 import MyAwesomeReactComponent from './MyAwesomeReactComponent';
 
+import './App.styl';
+
 injectTapEventPlugin();
 
 class App extends Component {

sample_webpack/src/App.styl

@@ -0,0 +1,2 @@
+body
+  background #888

sample_webpack/webpack.config.js

@@ -2,7 +2,6 @@ module.exports = {
   context: __dirname + "/src",
   entry: {
     js: "./App.js",
-    css: "./App.css",
     html: "./index.html",
   },
   output: {
@@ -27,6 +26,10 @@ module.exports = {
         test: /\.css/,
         loader: 'style!css'
       },
+      {
+        test: /\.styl/,
+        loader: 'style!css!stylus'
+      },
       {
         test: /\.html$/,
         loader: 'file?name=[path][name].[ext]'