Add style to bundled code using webpack


Here is the react boilerplate I’m trying to make from scratch.
I have bundled html with the react code but I’m not able to add styles (CSS).
I have heard about ExtractTextPlugin but not able to configure it.
Please suggest some way to add styles to it.

Thank you in advance.

Shouldn’t you be able to add CSS by adding a rule for CSS and using css-loader and style-loader?

1 Like

I don’t know how to add it. Please guide me.
Thank you for your time.

Something like this:

module: {
  rules: [
      test: /\.js$/,
      exclude: /node_modules/,
      use: {loader: 'babel-loader'}
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],

Don’t forget to install style-loader and css-loader as dev dependencies

1 Like

Also can you explain me why is there \ and $ in the regular expression?

The . character in regex matches any single character. To match literally just the period character, \. is used.

$ matches the end of a line. By adding that, the regex only matches the .css at the end of the string

1 Like

Really straight forward. Thankyou