Clarify importLoaders documentation?

[BerndWessels]

I tried to understand importLoaders from the readme but completely don't get it.

Can anybody please give a better explanation of what importLoaders do?

Thank you
Bernd

[mummybot]

I'm new to Webpack as well and as I understand it, It does what is says on the tin:

importLoaders allow to configure which loaders should be applied to @imported resources.

Given the following CSS:

/* File style.css */
@import "body.css";
body {
    /*background: yellow;*/
    font-size: 20px;
}
div {
    display: flex;
}
/* File body.css */
$color: red;
body {
    background: $color;
}
div {
    color: white;
    a {
        color: green;
    }
}
div {
    display: flex;
}

On a basic set up with using PostCSS the following would only apply PostCSS plugins to style.css, NOT the @imported body.css:

module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: "style-loader!css-loader!postcss-loader"
        }
    ]
},
postcss: function() {
    return [autoprefixer, precss];
}

To get autoprefixer (and precss) working on @imported CSS files we use importLoaders instead:

module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: 'style!css?importLoaders=1!postcss'
        }
    ]
},
postcss: function() {
    return [autoprefixer, precss];
}

I assume this has something to do with how Webpack loaders parse assets. You have to explicitly tell the loader to interpret @import directives. Why that isn't done by default or as an option in style-loader or css-loader I don't know - maybe there is a way of doing it that I am missing.

[BerndWessels]

Thanks @mummybot for the explanation. That helped me to get a bit better understanding.

Any idea what the number after importLoaders= means?

[mummybot]

As far as I can tell it is simply to make sure that the value of importLoaders is true:

module.exports = function getImportPrefix(loaderContext, query) {
    if(query.importLoaders === false)
        return "";
    var importLoaders = parseInt(query.importLoaders, 10) || 0;
    var loadersRequest = loaderContext.loaders.slice(
        loaderContext.loaderIndex,
        loaderContext.loaderIndex + 1 + importLoaders
    ).map(function(x) { return x.request; }).join("!");
    return "-!" + loadersRequest + "!";
};

https://github.com/webpack/css-loader/blob/master/lib/getImportPrefix.js

On an expanded note to my earlier reply, here is the webpackconfig.js I have currently assembled (based on the Webpack getting started example) which does the following:

1. Uses postcss with the autoprefixer and precss plugins. Precss is SASS syntax but the underlying code is written in Javascript instead of Ruby. The future is Javascript!
2. Assembles the Precss files into a single file called main.css.
3. Generates a source map which can then be used with Chrome Dev tools.

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    autoprefixer = require('autoprefixer'),
    precss = require('precss');

module.exports = {
    entry: [
        "./entry.js",
    ],
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    devtool: "source-map",
    module: {
        loaders: [
            { 
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1!postcss-loader')
            },
        ]
    },
    postcss: function() {
        return [autoprefixer, precss];
    },
    plugins: [
        // Set the name of the single CSS file here.
        new ExtractTextPlugin('main.css', { allChunks: true })
    ]
};

[BerndWessels]

Thanks for that @mummybot .

Not sure that the number really comes down to true/false though. For now I just put 1, but still feel a bit uncomfortable about that.

[randycoulman]

My understanding is that the number specifies how many loaders after css-loader should be applied to imports. The README says:

importLoaders (int): That many loaders after the css-loader are used to import resources.

If all you have is postcss, then 1 is fine. But if you had more loaders than that, you'd want to bump the number up.

[lvthanh101]

Thanks @randycoulman, your answer help me alot

[alisonailea]

what if I want my @import files to use a different set of loaders? For example my project's CSS is postcss but I'm using a npm package with .less files

[BerndWessels]

@alisonailea Just have multiple loader sections in your webpack config which include/exclude the folders you want.

[qbaty]

{
       test: /\.less$/,
       loader: ExtractTextPlugin.extract(
          'style' ,
          'css?sourceMap&importLoaders=1!' +
          'postcss-loader!' +
          'less?sourceMap'
       )
}

I found that if I set importLoaders = 1, less-loader still work for @import file. In this case,
@import file will only use postcss-loader, right ?
But in fact, it does not. and if I remove importLoaders=1, @import files still will bundle.
I can not figure out why..

[rbellamy]

I have to say that the order in which loaders are executed, and the language used here and in the docs is totally confusing.

'style!css!resolve-url!postcss!sass!./main.scss'

Let's look at the order of chaining.

main.scss => sass-loader => postcss-loader => resolve-url-loader => css-loader => style-loader

Now, tell me - which "after" are we talking about? From my understanding of the docs, and what's been said here, what people mean by "after" is the order when reading from left-to-right.

So, "chain order" is right-to-left. importLoaders is from left-to-right.

[silvenon]

Yeah, it's a bit confusing. What the docs are missing is another example, with an additional loader (sass-loader, less-loader, whatever), just so users can realize that they need to bump the number.

[quantuminformation]

I would have thought that importing would apply the same rules as the parent document. Ah well.