PostCSS + Webpack でグローバルなCSS変数

PostCSS + Webpack で、レスポンシブなサイトを作っている。

下記のようにグローバルな変数を定義して、

$desktop: "only screen and (min-width: 769px)";

こういうふうに使いたい。

@media $desktop {
  display: none;
}

PostCSSの@import とかでつまづいたので、結局、postcss.config.jsに直接書いて解決した。

postcss.config.js

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer'),
    require('postcss-simple-vars')({
      variables: require('./src/css/variables.css.js')
    }),
  ]
}

src/css/variables.css.js

module.exports = {
  desktop: 'screen and (min-width: 769px)',
}

参考

• https://github.com/postcss/postcss-simple-vars
• http://qiita.com/naru0504/items/5427f3795171c540ed91