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': {}
},
};