Как использовать переменные precss и правила @ в файлах с помощью веб-пакета

Я пытаюсь использовать precss, чтобы получить функциональность, похожую на sass, где я могу @define mixins/extends и $variables в глобальных файлах, на которые я затем могу ссылаться из других файлов, но я не могу понять конфигурацию веб-пакета. Пример:

переменные.css

$grey: #ddd;

@define-extend box {
  height: 100px;
  width: 100px;
}

стили.css

@import variables.css

.black-box {
  @extends box;
  background-color: $grey;
}

моя конфигурация webpack2 довольно проста:

const precss = require('precss');
const postCssImport = require('postcss-import');

const postcssOptions = {
  options: {
    sourceMap: 'inline',
    plugins: () => [
      precss,
      postCssImport(),
    ],
  },
};

module.exports = {
  ... 
  module: {
    rules: [
      {
        test: /\.css$/
        use: [
          'style-loader',
          {
          loader: 'css-loader',
          options: {
            modules: true,
            sourceMap: true,
            camelCase: 'dashesOnly',
            importLoaders: 2,
            localIdentName: '[name]__[local]__[hash:base64:5]',
          },
        },
        'resolve-url-loader',
          {
            loader: 'postcss-loader',
            options: postcssOptions,
          },
        ],
      },
    ],
  },
  ...
};

Я что-то упустил, чтобы заставить это работать? Спасибо.