Can't get webpack to output bundled css?

Question

i'm new to webpack and following a course. But one thing they don't really talk about is how to compile different sass to css.

I've given it a try here, but am getting an error. I'm trying to get it to output to styles.css for use with wordpress

const path = require('path'),
settings = require('./settings');

module.exports = {

  entry: {
    home: [
            settings.themeLocation + "js/scripts.js"
        ],
        style: [
            settings.themeLocation +'styles/main.sass'
        ]
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    home: [
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
    ]
    style:[
    path: path.resolve(__dirname, settings.themeLocation + "styles"),
    filename: "styles-bundled.css"
    ]
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { test: /\.css$/, use: 'css-loader' }
      { test: /\.sass$/, use: 'sass-loader' }
    ]
  },
  mode: 'development'
}

Answer 1

Here is a snippet from my webpack config

You need to install style-loader, css-loader and sass-loader
The following snippet is for development part

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

For production

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 2,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 3,
                        },
                    },
                    'sass-loader',
                ],
            },

& add the folling to plugin section

new MiniCssExtractPlugin({
    filename: '[name].[chunkhash:8].css',
}),

Note that the above snippets may not work directly for you, Its is just to give you idea how webpack can handle css $ scss