How to correctly include styles in webpack?

Question

webpack

Guys, tell me, please, how to correctly connect styles in webpack 3?
I have the following file structure:
webpack-app/public/assets/fonts/PT_Sans/pt_sans-web-bold-webfont.ttf
webpack-app/public/assets/images/content/2.jpg
webpack-app/src/styles /style.scss/

@font-face {
    font-family: 'pt_sansregular';
    src: url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.eot');
    src: url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.woff') format('woff'),
        url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.ttf') format('truetype'),
        url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "pt_sansregular";
}

.picture {
    background-image: url('/assets/images/content/2.jpg');
    background-position: center center;
}

webpack-app/src/index.js

console.log('app.js is running!');

import styles from './styles/styles.scss';

There are no module connection errors, but the image and fonts are not connected.
webpack-app\webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),

    entry: {
        main: './index.js'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'public')
    },

    // mode: 'development',

    watch: true,

    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'stage-0']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8000,
                        name: '[path][name].[ext]', // '[name].[ext]'
                        outputPath: 'img/'
                    }
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};