lhz516 / react-h5-audio-player

React audio player component with UI. It provides time indicator on both desktop and mobile devices.
https://codepen.io/lhz516/pen/dyGpmgP
MIT License
608 stars 92 forks source link

Setting the appropriate loader for style.css #210

Closed flmello closed 11 months ago

flmello commented 1 year ago

I imported the style.css as recommended.

import AudioPlayer from 'react-h5-audio-player'
import 'react-h5-audio-player/lib/styles.css'

But I get this compiling error message:

ERROR in ./node_modules/react-h5-audio-player/lib/styles.css 1:0
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
> .rhap_container {
|   box-sizing: border-box;
|   display: flex;

How do I set such loader? This is my package.json:

{
  "name": "global.meetyourselfportalprecious",
  "displayName": "portal_meetyourself",
  "version": "1.0.3",
  "description": "",
  "scripts": {
    "clean": "rm -rf ./node_modules && rm -rf ./build && rm -f package-lock.json",
    "config": "npm run clean && npm i",
    "start": "react-app-rewired start",
    "build": "GENERATE_SOURCEMAP=false react-app-rewired build"
  },
  "author": "Elizabeth",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "*",
    "@emotion/react": "*",
    "@emotion/styled": "*",
    "@mui/icons-material": "*",
    "@mui/material": "*",
    "@svgr/webpack": "*",
    "assert": "*",
    "buffer": "*",
    "config": "^3.3.9",
    "crypto-browserify": "*",
    "cryptocurrency-icons": "*",
    "emailjs-com": "^3.2.0",
    "https-browserify": "*",
    "moment": "*",
    "os-browserify": "*",
    "process": "*",
    "react": "*",
    "react-app-rewired": "*",
    "react-dom": "*",
    "react-h5-audio-player": "^3.8.6",
    "react-router-dom": "*",
    "react-scripts": "*",
    "react-swipeable-views": "^0.14.0",
    "stream": "*",
    "stream-browserify": "*",
    "stream-http": "*",
    "underscore": "*",
    "url": "*"
  },
  "browser": {
    "crypto": false,
    "stream": false
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
lhz516 commented 1 year ago

This doc is helpful: https://webpack.js.org/loaders/css-loader/