安裝webpackcss-loader時出現React-redux錯誤

嘗試將 css-loader 與 react-redux 一起使用，并在將模塊放入 webpack.config.js（代碼）時給我一些錯誤：

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: {loader:"css-loader"},
          },
        ],
      },
    };

或者，我嘗試過：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
 module: {
        rules: [
          {
            test: /\.css$/i,
            use: {loader:"css-loader"}
          }
        ]
      },
};

具有相同的結果 錯誤：

Module parse failed: Unexpected token (32:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render() {
|     return (
>       <Provider store={store}>
|         <AlertProvider template={AlertTemplate} {...alertOptions}>
|           <Router>
 @ ./leadmanager/frontend/src/index.js 1:0-35

webpack 5.53.0 compiled with 1 error in 204 ms

和 React-Redux 檔案：

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import Login from './accounts/Login';
import Register from './accounts/Register';
import PrivateRoute from './common/PrivateRoute';

import { Provider } from 'react-redux';
import store from '../store';
import { loadUser } from '../actions/auth';

// Alert Options
const alertOptions = {
  timeout: 3000,
  position: 'top center',
};

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Fragment>
              <Header />
              <Alerts />
              <div className="container">
                <Switch>
                  <PrivateRoute exact path="/" component={Dashboard} />
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/login" component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

我真的不明白為什么會發生這種情況，我想知道是否有人可以解釋我如何解決這個錯誤或者 webpack css-loader 如何影響 Redux 物件 .Thx！

uj5u.com熱心網友回復：

看起來您正在覆寫 webpack 規則，特別是將 *.js 替換為 *.css。在同一陣列中指定多個。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/i,
        use: {loader:"css-loader"},
      },
    ],
  },
};

標籤：反应 网络包 还原

上一篇：WebpackEncore Symfony-使用從基礎加載的模塊

下一篇：在Gatsby中使用來自scss或css的樣式不起作用