Как заставить webpack загружать шрифты из src/шрифтов, а не напрямую из src?

#reactjs #webpack

Вопрос:

Я новичок в webpack и пытаюсь загрузить свои шрифты из src/fonts каталога вместо src/ , но я продолжаю получать эту ошибку при сборке

 Module not found: Error: Can't resolve './SourceSerifPro-Regular.ttf' in '/home/user/parent/project/spa/src'
 @ ./src/stylesheet.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/stylesheet.scss) 6:36-75
 @ ./src/stylesheet.scss
 @ ./src/App.jsx
 @ ./src/index.js
 

Иерархия проектов:

  • спа
    • Src
      • шрифты
        • кое-что.отф

версия веб-пакета «4.44.2»

Вот моя конфигурация веб-пакета:

 return {
        devtool: isDevelopment amp;amp; "cheap-module-source-map",
        entry: path.resolve(__dirname, "./src/index.js"),
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "spa/js/[name].[contenthash:8].js",
            publicPath: isProduction ? "/static" : ""
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },
        devServer: {
            compress: true,
            historyApiFallback: true,
            open: true,
            overlay: true,
            port: 3000
        },
        module: {
            rules: [
                {
                    test: /.css?$/,
                    use: [
                        {loader: "style-loader"},
                        {loader: "css-loader"},
                    ]
                },
                {
                    test: /.scss$/,
                    use: [
                        {loader: "style-loader"},
                        {loader: "css-loader"},
                        {loader: "sass-loader"}
                    ]
                },
                {
                    test: /.js$|jsx/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /.(ico|png|jpg|gif|jpeg|svg|gltf)$/i,
                    use: {
                        loader: "file-loader",
                        options: {
                            name: "/spa/images/[name].[hash:8].[ext]"
                        }
                    }
                },
                {
                    test: /.(eot|otf|ttf|woff(2)?)$/,
                    loader: "file-loader,
                    options: {
                        name: "fonts/[name].[ext]"
                    }
                }
            ]
        }
 

Можно ли загрузить из src/шрифтов ?

Комментарии:

1. можете ли вы поделиться тем, как вы импортируете в файл scss ? также, какую версию веб-пакета вы используете ?

2. @импорт «./стиль/шрифты/шрифты»; версия веб-пакета «4.44.2»