css - 在 webpack 中配置字体

Question

我这里的 webpack 有点问题；我有点无法加载字体。 这是我的 webpack.config.js

const nodeExternals = require('webpack-node-externals');
const path = require('path');
const devMode = true;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry:
        [
            './src/main.js',
            './scss/main.scss'
        ],

    output: {
        filename: "main.min.js",
        chunkFilename: '[name].bundle.min.js?bust=[chunkhash]',
        path: path.resolve(__dirname, 'static_root'),
        publicPath: "/assets/"
    },
    target: "node",
    externals: [nodeExternals()],
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: 'css/'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV == 'development',
                        }
                    },
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[ext]'
                }
            }
        ]
    }
};

这会构建我的 css，尽管我的本地字体不包含/不呈现。这也会将我的字体复制到/static_root(这是构建 css 的地方)。

所以我最终得到了这个目录结构:

public/static_root/css/main.css
public/static_root/BebasNeue-Regular.ttf
public/static_root/main.min.js

不幸的是，我考虑过只调整我的 scss 文件中字体的路径，尽管这会使构建过程失败，因为我的工作目录和输出根目录不相同。

我的 scss/font-directory 结构如下:

/public/scss/fonts/_fonts.scss
/public/scss/fonts/BebasNeueRegular.ttf
/public/scss/main.scss

那么我怎样才能实现包含字体，或者这通常是如何完成的，因为我在网上发现了很多不同的方法，很遗憾，这些方法对我没有用。

如有任何帮助，我们将不胜感激。

您好， derelektrischemoench

Answer 1

所以我找出了导致问题的原因。它必须对字体的加载器做一些事情(我使用的是旧的)。我像这样使用 url-loader 尝试了整个过程:

{
  test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
      limit: 10000,
      name: '[name].[ext]'
      }
  }

... 这让一切顺利进行。这有点令人困惑，因为我在网上找到了无数关于如何实现这一目标的教程，其中大部分已被弃用。

感谢您的回复。