React JS，webpack配置不正确，无法加载mp3播放器

Question

我已经安装了mp3播放器（https://www.npmjs.com/package/react-mp3-player#installation），但编译时出现错误。

错误

app.css:1 Uncaught Error: Module parse failed: Unexpected token (1:0)
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
> .mp3-player-track-input {
|     -webkit-appearance: none;
|     width: 85%;
    at eval (app.css:1)
    at Object../node_modules/react-mp3-player/dist/scss/app.css (main.js:2817)
    at __webpack_require__ (main.js:20)
    at eval (Playlist.js:11)
    at Module../node_modules/react-mp3-player/dist/components/Playlist.js (main.js:2662)
    at __webpack_require__ (main.js:20)
    at eval (index.js:2)
    at Module../node_modules/react-mp3-player/dist/index.js (main.js:2806)
    at __webpack_require__ (main.js:20)
    at eval (audio.js:4)

WEBPACK.CONFIG.JS

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

音乐播放器组件

import React from 'react'
import Playlist from 'react-mp3-player';

function Audio() {
    const tracks = [{ img: '', name:'MP3', desc: 'Description 1', src:'media/tracks/Kalimba.mp3'}]


    return (
        <div>

          <Playlist tracks={tracks}/>

        </div>
    )
}

export default Audio

我应该在这里进行哪些更改？我应该安装任何软件包吗？

Answer 1

我认为您缺少css-loader和style-loader加载程序

module: {
  rules: [
  {
    test: /\.css/,
    use: [
      "style-loader",
      "css-loader",
    ]
  },
}