How to include styles so that webpack would see them during the build?

Question

React

Hello.
I am writing an application here in react and trying to set up webpack for work.
However, there is a problem, I wrote styles in style.css and kept them next to index.html, and connected through a line in index.html , I configured webpack to collect styles in a separate bundle.css, but after assembly there is no content of my style .css, however there are styles from plugins. Actually, the question is, how can I connect styles to the application, so that webpack would take them into account and add them to the bundle?
<link rel="stylesheet" href="./style.css">

Answer 1

1) In index.js, import styles, import "style.css";
2) Add your style.css as entry in config

entry: [
        './src/ts/index.tsx',
        './src/assets/styles/style.styl'
    ],

(don't pay attention to ts and styl, in your case just ...style.css)
Don't forget about

new MiniCssExtractPlugin({
            filename: './assets/css/bundle.css',
        })

so that the corresponding one appears in your final index.html
The difference is that in the 1st case the styles will become part of bundle.js, and in the 2nd case they will become a separate file.
Personally, I think that you should not inflate the size of the final bundle, but that's how you like it.
Of course, do not forget about the loaders, depending on the option chosen, they differ