CSSNext Vars

usage.css

/* No imports needed */

.nav {
  width: var(--Nav-mobile-height);
}

usage.js

import cssVariables from './variables.js';

const myCssVar = cssVariables['--Nav-mobile-height'];

variables.js

export default {
  '--Nav-mobile-height': '80px',
  (...your other variables)
 };

webpack.config.js

import cssVariables from './variables.js';

const config = {};

(...other webpack config stuff)

config.postcss = () => ([
  cssnext({
    features: {
      customProperties: {
        variables: cssVariables,
      },
    },
  }),
  (...other plugins)
]);

export default config;

Nice!

According to docs you don't have to prefix vars with --.

The keys are automatically prefixed with the CSS -- to make it easier to share variables in your codebase.

https://github.com/postcss/postcss-custom-properties#variables