Webpack with postcss-cssnext

style.import.css

@import "./variables.import";

.box {
  background: var(--yellow);
}

variables.import.css

:root {
  --yellow: #FFE673;
}

webpack.conf.js

var webpack = require('webpack');

var babelSettings = {
  stage: 0
};

if (process.env.NODE_ENV !== 'production' && !process.env.IS_MIRROR) {
  babelSettings.plugins = ['react-transform'];
  babelSettings.extra = {
    'react-transform': {
      transforms: [{
          transform: 'react-transform-hmr',
          imports: ['react'],
          locals: ['module']
      }, {
          transform: 'react-transform-catch-errors',
          imports: ['react', 'redbox-react']
      }]
    }
  };
}

module.exports = {
  entry: './entry',
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?module&localIdentName=[name]__[local]__[hash:base64:5]!postcss'
      }
    ]
  },
  postcss: function () {
    return [
      require('postcss-import')({
        addDependencyTo: webpack
      }),
      require('postcss-cssnext'),
      require('postcss-at2x')
    ];
  }
};