Webpack-在Less-loader中用于构建和生产CSS的不同字体路径

问题描述

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

fonts
  desyrel
    desyrel_-webfont.woff
less
  ds-handwritten.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'

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

我尝试通过将文件加载器与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,}
                    },],]
    },

解决方法

解决方案是：

• 忽略CSS加载器中的网址（网址：false）
• 避免使用resolve-url-loader解析网址

    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,}
                    },],]
    },