ReactJSインポートされたCSSで環境変数を使用するには？

Question

https://github.com/facebookincubator/create-react-appを使って簡単なReactアプリを作成しました。

私はこのようなコンポーネントのCSSに設定可能なURLを指定しようとしています：

.Cell { 
    background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png); 
} 

そして、ここでは、コンポーネントの：

import React from 'react'; 
import './Cell.css' 

class Cell extends React.Component { 
    render() { 
     return (
      <div className="Cell"> 
       {this.props.name} 
      </div> 
     ); 
    } 
} 

しかし、プロセス変数がダウンしたたり落ちるようにそれが見えませんインポートされたCSSに転送します。これをどうやってやりますか？

Answer 1

CSSでjs変数を使用する場合は、プレーンcssファイルの代わりにインラインスタイルに反応してみてください。

https://facebook.github.io/react/tips/inline-styles.html

あなたはCSSやJSを分離したい場合は、あなたのグローバル変数を管理するためのCSSプリプロセッサが必要な場合があります。