How to separate css from js in webpack?

Question

webpack

For half a day I have been looking for how to separate style files from js, when using entry. Well, I take both scripts and styles, and at the output I get styles and scripts from styles. How do you fix such errors? I was looking for how to get all files from a folder, but publicPath does not work in MiniCssExtractPlugin.

{
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }

plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[id].css",
    })
  ]

entry: [
    path.resolve(__dirname, '../src/js/main.js'),
    path.resolve(__dirname, '../src/sass/style.sass')
  ],

Answer 1

It is important to understand that webpack is a bundler of js modules. For each entry you will receive a js bundle.
In your case, you need to import the sass file into main.js and then the webpack will process and extract them using the MiniCssExtractPlugin that you have in the configuration. Those. entry (with sass file) needs to be removed. And import the style file into main.js
import "some-path-name/style.sass"

Answer 2

Red, no?