Webpack - less-loader 中构建和生产 css 的不同字体路径答案

【问题标题】：Webpack - different font path for build and production css in the less-loaderWebpack - less-loader 中构建和生产 css 的不同字体路径
【发布时间】：2021-02-19 15:46:52
【问题描述】：

我正在尝试使用 webpack 从 LESS 创建一个 CSS。我的源文件夹具有以下层次结构：

字体去锡瑞尔 desyrel_-webfont.woff 较少的 ds-handwritten.less

less文件的内容包括相对字体路径，在生产中会用到


@charset "utf-8";

@font-face {
  font-family: 'desyrelregular';
  src: url('/www/fonts/desyrel/desyrel_-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

//DS hand written
.ds-hw { font-family: 'desyrelregular', sans-serif !important; }

我的输入脚本如下：

import 'ds-less/ds-handwritten.less';

当我尝试运行 webpack 脚本时，我收到以下错误：

模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：错误：无法解析 '/www/fonts/desyrel/desyrel_-webfont.woff' in ''

如何通知 webpack，字体 '/www/fonts/desyrel/desyrel_-webfont.woff' 的相对路径指向源路径中的字体：'src/fonts/desyrel/desyrel_-webfont.woff'？

我尝试使用 file-loader 和 resolve-url-loader 来处理这个问题（按照官方文档 https://webpack.js.org/loaders/sass-loader/#problems-with-url 的提示），但没有成功。

    module: {
        rules: [
            {
                test: /\.(ttf|eot|woff|woff2|svg)$/,
                include: path.resolve(__dirname, './src/fonts'),
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'www/fonts/',
                        esModule: false
                    },
                },
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                strictMath: true,
                            },
                        }
                    },
                ],
            },
        ]
    },

【问题讨论】：

标签： webpack less webpack-file-loader less-loader resolve-url-loader

【解决方案1】：

解决办法是：

忽略 CSS-loader 中的 url (url: false)
避免使用 resolve-url-loader 解析 url

    module: {
        rules: [
            {
                test: /\.(ttf|eot|woff|woff2|svg)$/,
                include: path.resolve(__dirname, './src/fonts'),
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                        esModule: false
                    },
                },
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                        },
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                strictMath: true,
                            },
                        }
                    },
                ],
            },
        ]
    },

【讨论】：