About importloaders usage problem

[Malenconiaprincep]

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
            test : /\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  plugins:[
                    require('autoprefixer'),
                    require('postcss-import'),
                    require('precss')
                  ]
                }
              }
            ]
        }
    ]
  }
};

This is my webpack config
I try to modify importLoaders value , Whatever I changed to 0 or 1, said it out of the results are the same， I suppose if set 0 that postcss-loader can't work , Let me feel confused is that it is still at work, Please explain the reasons Thank you very much ~

[michael-ciniawsky]

@Malenconiaprincep importLoaders are for @import requests which are not imported by
e.g postcss-import , it has no effect when there are no @import left, when css-loader gets the file :). css-loaderneeds to know the preceding loaders to make the correct request (webpack specific). You can simply ignore this, but if you @import many files in each component remove postcss-import and let css-loader handle that @import => Request, since it will bloat your code base, if you @import the same files in all components

Request

@import './foo.scss';

require('./~/css-loader!~/loader1!~/loader2!/./file.css')

!~/loader1!~/loader2! === ${importLoaders}

Example

@import './foo.css'; /* Request 0 */

.class { color: red; } /* Request 1 */

// Internal CSS representation, created by css-loader
// [ [module.id, module.css, module.map] ]
[
  [0, css, map] // @import
  [1, css, map] // file.css
]

[Malenconiaprincep]

I mainly stressed the point that set 0 postcss - loaders plugins should not work,

So the css should't show

Example

test.css

.title {
  display:flex
}

webpack.config.js

{   
  loader: 'postcss-loader',
  options: {
      plugins:[
      require('autoprefixer'),
      ]
  }
}

The flollwing results is my suppose

importLoaders:1

.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

importLoaders:0

.title {
  display: flex;
}

Whatever I changed to 0 or 1, said it out of the results are the same,

the result

.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

[michael-ciniawsky]

I'm not sure I got it to 💯 , but that's not how importLoaders work, it only affects @import in the file processed by css-loader which in your example is the one, that gets processed by postcss-loader (Autoprefixer) before :)

[michael-ciniawsky]

                loader: 'postcss-loader',
                options: {
                  plugins:[
-                   require('autoprefixer'),
                     require('postcss-import'),
                     require('precss'),
+                   require('autoprefixer'),
                  ]
                }
              }

[Malenconiaprincep]

I finally understand thanks you very much