Using es6-loader with non-js loaders.

[iamdustan]

I spent too many cycles trying to figure out why my require('css!style!stylus!./module.styl'); was not working this morning. Then I remembered that JS file was being compiled by the es6-loader and the require call was probably being transformed in some way there.

Is there any clean way to use the es6-loader without smashing all require calls for webpack?

[shama]

If you're using the loader inline, it is import bamboo from 'es6!./module.js'; or from non-es6, require('es6!./module.js').

Or if you want it cleaner, add the following to your webpack config:

module: {
  loaders: [
    { test: /\.js$/, loader: 'es6-loader' }
  ]
}

and just require('./module.js')

---

Loaders are applied in the order you place them. So for your example, require('css!style!stylus!./module.styl')... it will transform stylus to css, apply the css to the page and then convert to css? Probably not what you're intending.

You probably want one of these:

• require('style!raw!stylus!./module.styl') Convert the stylus to css, apply the raw CSS to the page.
• require('style!css!stylus!./module.styl') Convert the stylus to css, apply additional resolutions with the css-loader and then apply to the page.

Leave off the style! if you don't want to apply to the page but want to return the compiled CSS. All of these can be moved into the webpack config if you want cleaner require calls as well.

[iamdustan]

Here is what I had that was failing.

main.js

var css = require('./styles.styl');
document.body.classList.remove('is-loading');

import { Leaderboard, Vote, UploadManager } from './app';
new Leaderboard();
new Vote();
new UploadManager();

webpack.config.js

module.exports = {
  context: __dirname + '/source',
  entry: './main.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
      { test: /\.js$/, loader: 'es6-loader' },
    ]
  },
};

I had to change the es6-loader to ignore the initial file to get the css require to work.