Javascript 如何为react redux toastr安装CSS

我尝试过使用通知，但无法正确加载CSS。我使用

webpack

进行捆绑，在

LoginForm.js

中

LoginForm.css

正确加载并生效（绿色背景来自那里），用于

react redux toastr

的

react redux toastr.min.css

不起作用。我试着把它包括在烤面包机被点燃的文件和根目录中，但没有一个有用。由于

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'));
}

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

。我使用了

react redux到str 7.6.4

和网页包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]

---

由于您使用的是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

。我使用了

react redux到str 7.6.4

和网页包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]

---

尝试将此添加到index.html文件中：

我建议签出

notistack

，我走的路径与您选择toast系统时的路径相同，最后选择了toastr。尝试将此添加到index.html文件中：

我建议签出

notistack

，我走的路和你选择吐司系统时走的路一样，最后我选择了吐司系统而不是烤面包机。