Webpack 3 - @ font-face неправильно загружает шрифты

Question

Я пытался выяснить это весь день и искал каждое решение в Интернете, но, похоже, не могу найти ни одного.

Мой веб-пакет

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

    module.exports = {
        entry: './src/scripts/index.js',
        output: {
            path: path.resolve(__dirname, '../build'),
            publicPath: path.resolve(__dirname, '../build'),
            filename: 'bundle.js',
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: [
                            ['transform-class-properties'],
                            ['transform-object-rest-spread'],
                        ],
                    },
                }, {
                    loader: 'eslint-loader'
                }]
            }, {
                test: /\.(png|jpg|gif|json|mp4|ico)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: './assets/[name].[ext]',
                    },
                }, ],
            }, {
                test: /\.(scss|css)$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use: ['css-loader','sass-loader']
                }),
            },{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "file-loader",
                options: {
                    limit: 10000,
                    name: './assets/fonts/[name].[ext]',
                    mimetype: 'application/octet-stream'
                }
            }, ],
        },
        plugins: [
            new ExtractTextPlugin({
                filename: 'style.css',
            }),
            new CopyWebpackPlugin(
                [{
                    from: './src',
                    to: './',
                    force: true,
                }, ], {
                    ignore: ['*.js', '*.css', '.DS_Store'],
                },
            ),
        ],
    }

В моем index.js есть импортирующий файл main.scss, а затем в моем main.scss есть файл font.scss, который находится ниже * 1006.*

    $base-fonts-path  : '/assets/fonts';



    @font-face {
      font-family: 'cardowalsheim';
      src: url('#{$base-fonts-path}/GTWalsheimProThin.eot'); /* IE9 Compat Modes */
      src: url('#{$base-fonts-path}/GTWalsheimProThin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('#{$base-fonts-path}/GTWalsheimProThin.woff') format('woff'), /* Modern Browsers */
           url('#{$base-fonts-path}/GTWalsheimProThin.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('#{$base-fonts-path}/GTWalsheimProThin.svg#114f83b1372052e00fe6210ffd8e061d') format('svg'); /* Legacy iOS */

      font-style:   normal;
      font-weight:  200;
    }

Кажется, шрифт загружается, но автоматически превращается в тип HTML.Любая помощь будет высоко ценится.