2017-02-06 13 views
0

color-primarycolor-accentvarsをreact-toolboxに置き換えようとしていますが、これはreact-toolbox-themrですが、失敗しました。デモのために単純なgit repoをまとめました。反応ツールボックス2.0-ベータ6の機能が動作しない

は、ここでは、私のreact-toolbox-themr.config.json

{ 
    "customProperties": { 
    "color-primary": "rgb(219,0,0)", 
    "color-primary-dark": "rgb(203,0,0)", 
    "color-accent": "rgb(64,153,255)", 
    "color-accent-dark": "rgb(3,155,229)" 
    }, 
    "output": "src/client/stylesheets/react-toolbox" 
} 

ファイルは罰金構築console.logだとインクルードは物事が正しくインポートされている...しかし、私のアプリは、テーマを取得していないことを私に示してデベロッパーツールを反応させます。

私はテーマのカスタマイズをシンプルで、themrサイトの例に近づけようとしましたが、私はスタイルのないコンポーネントが出てきています。どんな助けもありがとう。

here is my repo

答えて

0

(...本当に驚いていない)のWebPACKの設定の問題を、私はついにそれを考え出し、それがでした。ここ

は違いを作ったそのコミットである:

{ 
     test: /\.css$/, 
     include: [/node_modules/, dir.src], 
     use: [{ 
     loader: 'style-loader' 
     },{ 
     loader: 'css-loader', 
     options: { 
      modules: true, 
      sourceMap: true, 
      importLoaders: 1, 
      localIdentName: '[name]__[local]__[hash:base64:5]' 
      } 
... 
} 

'[name]__[local]__[hash:base64:5]'一部だった:それは私がCSSファイルを扱うために(部分的に)この設定を使用していたということであったに降りてきたものをhttps://github.com/rkstar/react-toolbox-dashboard/commit/cfcfbd72ce666b1724622fe015b3818fc55c688c?diff=split#diff-1e71174b321bf83364a4a4509f482f9c

私の定義したクラス名を難読化してファイルの[name](つまりテーマ[.css])を含め、クラス名の最後に5文字のハッシュを追加します。

反応ツールボックスのコンポーネントがクラス名rt-appBar-whateverを使用しようとしていますが、クラス名(webpackローダー経由で読み込んだ後)の名前がtheme__rt-appBar-whatever__99Kiw <となっていました。

[local]を使用するように設定が変更され、すべてが期待通りに機能しています。

これは、今後この問題に遭遇する可能性のある他の人に役立つことを願っています。

関連する問題