var path = require('path');
var extractLessVarsSelctor = require('extract-less-vars-selector');
const MergeLess = require('extract-less-vars-selector/src/mergeLess.js')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.less/,
      use: [{
          loader: 'style-loader'
        },
        {
          loader: 'css-loader'
        },
        {
          loader: 'less-loader',
          options: {
            strictMath: true,
            noIeCompat: true,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              new extractLessVarsSelctor({
                handleImportLess: true,
                output: path.resolve(__dirname, './theme'),
                webpackConfigPath: path.resolve(__dirname, './webpack.config.js')
              })
            ]
          }
        }
      ]
    }]
  },
  plugins: [
    new MergeLess({
      path: path.resolve(__dirname, './theme')
    })
  ]
};

var path = require('path');
var extractLessVarsSelctor = require('extract-less-vars-selector');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('extractLessVarsSelctor')
      .test(/\.less$/)
      .include
      .end()
      .use('postcss')
      .loader('postcss-loader')
      .options({
        plugins: [
          new extractLessVarsSelctor({
            handleImportLess: true,
            reverse: false,
            output: path.resolve(__dirname, './theme'),
            webpackConfigPath: path.resolve(__dirname, './webpack.config.js')
          })
        ]
      })
      .end()

    config.plugins.push(new MergeLess({
      path: path.resolve(__dirname, './theme')
    }))
  }
}

/** src/index.js **/
import styles from './index.less';
// do something
...