如何为 react-redux-toastr 安装 CSS答案

【问题标题】：How to install CSS for react-redux-toastr如何为 react-redux-toastr 安装 CSS
【发布时间】：2019-04-10 04:43:22
【问题描述】：

我尝试使用react-redux-toastr 进行通知，但无法正确加载 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'));
}

./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() {
   ...
  }
 }

【问题讨论】：

尝试将其添加到您的 index.html 文件中：<link href="https://diegoddox.github.io/react-redux-toastr/7.1/react-redux-toastr.min.css" rel="stylesheet" type="text/css">
我建议查看notistack，我在选择 toast 系统时选择了与您相同的路径，最终选择了 toastr。

标签： javascript css reactjs redux react-redux

【解决方案1】：

由于您使用的是 npm 包，react-redux-toastr CSS/Sass 文件也可以使用。基于the documentation 和您的代码库。

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

check import rules in 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]

【讨论】：