Блог

Я пытался использовать react-redux-toastr для уведомлений, но я не могу заставить CSS загружаться должным образом. Я использую webpack для связки, в LoginForm.js том LoginForm.css , что загружается правильно и вступает в силу (оттуда появляется зеленый фон), react-redux-toastr.min.css for react-redux-toastr не работает. Я попытался включить его в файл, в котором запускается тостер, и в корень, но ни один из них не помог. Поскольку webpack он компилируется, он должен удовлетворять всем import -s.

Пожалуйста, помогите мне отладить и исправить эту проблему.

appClient.js

 ...
import RootReducer from './reducers/flightControlApp';
import './components/style/react-redux-toastr.min.css';
import ReduxToastr from 'react-redux-toastr';

...

let store = compose(applyMiddleware(...middlewares)) (createStore) (
    RootReducer,
    persistedState
);

...

window.onload = () => 
{
    ReactDOM.render(
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <Provider store={ store }>
                <div>
                    <ReduxToastr
                            timeOut={15000}
                            newestOnTop={false}
                            preventDuplicates
                            position="top-left"
                            transitionIn="fadeIn"
                            transitionOut="fadeOut"
                            progressBar
                            closeOnToastrClick/>
                    <AppRoutes />
                </div>
            </Provider>
        </MuiThemeProvider>,
        document.getElementById('app'));
}
  

./reducers/flightControlApp.js

 import { combineReducers } from 'redux';
import UserReducer from './userReducer';
import UserStatsReducer from './userStatsReducer';
import {reducer as toastrReducer} from 'react-redux-toastr'

let rootReducer = combineReducers({
    userState: UserReducer,
    statsState: UserStatsReducer,
    toastr: toastrReducer
})

export default rootReducer;
  

LoginForm.js

 import React from 'react';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import './style/LoginForm.css';
import { toastr } from 'react-redux-toastr';
import { PulseLoader } from 'react-spinners';
import { assert } from 'chai';

class LoginForm extends React.Component{

    componentDidUpdate() {
        if (this.props.isLoginError)
        {
            toastr.error('Error:', 'Login failed', {
                onShowComplete: this.props.onResetLoginCallback,
                onToastrClick: this.props.onResetLoginCallback
            });
        }
    }

 render() {
   ...
  }
 }
  

Поскольку вы используете пакет npm react-redux-toastr , файл CSS / Sass также доступен для использования. Основывайтесь на документации и вашей кодовой базе.

appClient.js

 import RootReducer from './reducers/flightControlApp';
import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'; // it's coming from node_modules
// instead of import './components/style/react-redux-toastr.min.css';
import ReduxToastr from 'react-redux-toastr';
  

или импортируйте его в основной CSS, если он у вас есть;

appclient.css или appclient.scss

 @import 'react-redux-toastr/src/styles/index'; // string import
@import url('react-redux-toastr/src/styles/index') // or url import
  

проверьте правила импорта в css. Я использовал react-redux-toastr 7.6.4 .

И плагин Webpack CSS.

 // module import section

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractTextPlugin = new ExtractTextPlugin('./css/styles.css');

// Webpack css plugin configurations
module: {
    rules: [{
      test: /.s?css$/,
      use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
              {
               loader: 'css-loader',
             },
             {
               loader: 'sass-loader',
             },
           ],
      }),
   },
]},
plugins: [extractTextPlugin]