css next variables globalyを使用する

Question

私はpostcssパーサーをhttp://cssnext.ioに設定しました。variables.cssファイルを設定してすべてのテーマ設定を含める方法を見つけようとしています。

これまでvariable.css私はこれらの変数を使用したい私の他のファイルなので、@import './variables.css'または同様にインポートしてからのように、そのファイルにそれを使用するよりも、

:root { 
    --color-white: #FFF; 
    --color-black: #000; 
} 

VARSのカップルと、このようになります。例えばbackground-color: var(--color-white)、しかし私はfollwoing取得警告：

変数 '--color-whiteが' [postcss-カスタムプロパティ]未定義とフォールバック なしで使用され

あなたがインストールする方法詳細については、この postをチェックpostcssインポート

$ npm install postcss-import

をインストールしようとすることができます

Answer 1

。 postcss-importを使用して

EDIT は、問題を解決しかし、最新バージョンの問題は、現在存在し、安定性のためにV 7.xのを使用

Answer 2

別の解決策あなたのJavaScriptコードを使用して変数を共有したい場合は、にありますpostcss-custom-properties "variables"オプションに依存しています。 http://cssnext.io/usage/#features

：ここ

は

require("postcss-cssnext")({ 
    features: { 
    customProperties: { 
     variables: { 
     mainColor: "red", 
     altColor: "blue", 
     } 
    } 
    } 
}) 

ソースのグローバル変数を渡すためにpostcss-cssnext設定の例です。