How to specify multiple loaders in Webpack plugin?

Question

My Webpack config contains the following loaders.

module: {
  loaders: [
    { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
    { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
  ]
},

Then, I wished to pull out the CSS to a separate file and I tried using the extract text webpack plugin, alternating my config like this.

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

module: {
  loaders: [
    { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
    // { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
    {
      test: /\.sass$/,
      loader: ExtractTextPlugin.extract(
        {
          loaders: ["css-loader", "sass-loader"],
          fallbackLoader: "style-loader"
        }
      ),
      exclude: /node_modules/
    }
  ]
},
plugins: [new ExtractTextPlugin("global.css")],...

However, it fails with. Probably due me not specifying the loaders correctly. How can I specify multiple loaders (one for SASS and one for CSS)?

Module not found: Error: Cannot resolve module '[object Object]' in C:\Source\Poc\TestProj
@ ./index.js 7:14-38

I've checked the file index.js but I can't see anything wrong there. It's literally empty export, as shown below. And the reference to 7:14-38 says nothing to me. There aren't that many lines in the file, even...

import CssGlobal from "./global.sass";
//document.write("Banana!");
export default {}

score 0 · Accepted Answer · edited Sep 19 '17 at 11:23

This syntax for ExtractTextPlugin.extract() only works in webpack2 and above, apparently (an object as argument). Check this issue.

In order to make it work with webpack1, the syntax is:

ExtractTextPlugin.extract([notExtractLoader], loader, [options])`

notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when allChunks: false)

loader the loader(s) that should be used for converting the resource to a css exporting module.

Source: https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md

So, a working config file would be:

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

module.exports = {
    /* ... */
    module : {
          loaders: [
            { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
            { 
                test: /\.sass$/, 
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
               /* using ExtractTextPlugin.extract(["css","sass"]) works too */

            }
          ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]   
}

This will genereate a styles.css file.

Thanks. I made it work now, thanks to you. Just a quick follow-up. I've been informed that the shouting syntax `style!css!sass` is bad and should be avoided. Is that a necessary evil in your example (because it can't be done in a different way)? Or would you say that you support it, even? — , Jan 18 '17 at 22:52
@AndyJ you're welcome. You can indeed pass an array as an argument. I updated my answer with that option. I searched the webpack1 docs and haven't found a recommended way (the [docs](https://webpack.github.io/docs/stylesheets.html) use the `css-loader!sass-loader`syntax). I am not able to say if it's a bad approach (other than ugly code) for some reason, really don't know. — mrlew, Jan 19 '17 at 20:21

score 0 · Answer 2 · answered Feb 19 '17 at 20:35

Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.

For example, you can use loaders to tell webpack to load CoffeeScript or JSX.

Nicely Explained here http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar

How to specify multiple loaders in Webpack plugin?

2 Answers2

Linked