Add style to bundled code using webpack

JavaScript
1

GitHub: https://github.com/Chirag161198/react-boilerplate

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.

2

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

1 Like
3

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

4

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
5

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

6

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
7

Really straight forward. Thankyou