React Toolbox не работает? (AppBar стиль и рябь)

Я только что включил AppBar лайк

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

И это выглядит так:

Заметьте, что значок меню выключен и черный вместо белого?

Когда я нажимаю значок / кнопку, пульсация остается в конце

Вероятно, что-то не так с моей настройкой, но что?

Интересно, если использование CSS-модулей испортило вещи? мой webpack.config.js ниже. Дайте мне знать, если вам нужно больше информации. Github репо при коммите

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"
}

1 ответ

Хорошо, я нашел ответ, начинающийся с https://github.com/react-toolbox/react-toolbox-example и комментирующий материал в их конфигурации веб-пакета. То, что повторило проблему, было postcss. Я включил его в свой проект, и он работает.

  {
    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': {}
},
};
Другие вопросы по тегам