Webpack loader configuration to load css and sass files for React JS

Question

I have installed react-h5-audio-player in a React app made with create-react-app and it worked fine.

I did same to customized React project and I am being asked to configure webpack to load the css files.

webpack.config.js

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

I have attached screenshot of error log and code section where error happened

The error (

ERROR in ./node_modules/react-h5-audio-player/lib/styles.css 1:0
Module parse failed: Unexpected token (1:0)

) happened in the below css file, these css files are made by installed audio player (which is made with typescript)

.rhap_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: inherit;
  width: 100%;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
.rhap_container:focus:not(:focus-visible) {
  outline: 0;
}

Ajeet Shah · Accepted Answer · 2020-06-06 21:28:39Z

2

You need to add css-loader and style-loader to enable your webpack to bundle CSS files:

Install the loaders:

npm install css-loader style-loader --save-dev
npm install sass-loader node-sass --save-dev

Set the rules in webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        loader: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ]
  }
};

Check css-loader, style-loader and sass-loader

edited Jun 6, 2020 at 21:28

answered Jun 6, 2020 at 21:18

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anoop K George Over a year ago

Thanks it worked, however some css parts still missing in page, I mean the audio player UI is different, I hope I may need to add sass files too

Anoop K George Over a year ago

How do I configure webpack for all kind of css related files ?

Anoop K George Over a year ago

Thank you for the efforts, still something missing in the UI, unknown reasons

Anoop K George Over a year ago

Appreciate your response, code is working now perfectly. forgot to install style-loader, much love 4 u

Anoop K George Over a year ago

Yeah, I use react with Django. Thanks for your info

Collectives™ on Stack Overflow

Webpack loader configuration to load css and sass files for React JS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related