2017-03-22 13 views
0

私はちょうど反応ツールボックスが機能していませんか? (アプリケーションバーのスタイリングとリップル)が

<AppBar 
    leftIcon="menu" 
    onLeftIconClick={this.toggleDrawerActive}> 
</AppBar> 

ようAppBarを含めましたそして、それは次のようになります。メニューアイコンがオフと黒の代わりに白である

enter image description here

お知らせ?

私はアイコン/ボタンをクリックするとリップルが私のセットアップが、何と間違って何かおそらく最後

enter image description here

Theresのにとどまりますか?

CSSモジュールを使いこなすのが難しいのだろうか?私のwebpack.config.js以下。あなたがより多くの情報を必要とするかどうかを教えてください。 Github repo at commit

const path = require("path") 
const HtmlWebpackPlugin = require("html-webpack-plugin") 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 

const context = path.resolve(__dirname, "src") 

module.exports = { 
    context, 
    entry: "./js/index.js", 
    output: { 
    path: path.resolve(__dirname, "build/js"), 
    filename: "index.js" 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: "babel-loader", 
     options: { 
      plugins: [ 
      [ 
       "react-css-modules", 
       { 
       context 
       } 
      ] 
      ] 
     } 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: { 
      loader: "css-loader", 
      options: { 
       modules: true, 
       importLoaders: 1, 
       localIdentName: "[path]___[name]__[local]___[hash:base64:5]", 
       sourceMap: true 
      } 
      } 
     }) 
     }, 
     { 
     test: /\.s(a|c)ss$/, 
     use: ['style-loader', 'css-loader', 'sass-loader'] 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: "./index.html", 
     filename: "index.html", 
     inject: "body" 
    }), 
    new ExtractTextPlugin("css/app.css") 
    ], 
    devServer: { 
    contentBase: path.resolve(__dirname, "src"), 
    historyApiFallback: true 
    }, 
    devtool: "source-map" 
} 

答えて

0

[OK]を私は答えはhttps://github.com/react-toolbox/react-toolbox-exampleを始めとそれらのWebPACKの設定で何かをコメントアウトました。問題を再現したものはpostcssでした。私は私のプロジェクトにそれを含め、それは動作します。 【 - 前提条件リリースノート](https://github.com/react-toolbox/react-toolbox#prerequisites)また

{ 
    test: /\.css$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: [ 
     { 
      loader: "css-loader", 
      options: { 
      modules: true, 
      importLoaders: 1, 
      localIdentName: "[path]___[name]__[local]___[hash:base64:5]", 
      sourceMap: true 
      } 
     }, 
     'postcss-loader' // this is required 
     ] 
    }) 
    } 

postcss.config.js

module.exports = { 
plugins: { 
    'postcss-import': { 
    root: __dirname, 
    }, 
    'postcss-mixins': {}, 
    'postcss-each': {}, 
    'postcss-cssnext': {} 
}, 
}; 
+0

'反応-toolbox'を追加は、明示的に述べています。 webpackの例はwebpack 1にありますが、そこからwebpack 2の['postcss-loader'](https://github.com/postcss/postcss-loader#usage)の設定方法を調べるだけです。 –

関連する問題