Webpack - другой путь к шрифту для сборки и производства css в less-loader

Я пытаюсь создать CSS из LESS с помощью webpack. Моя исходная папка имеет следующую иерархию:

fonts
  desyrel
    desyrel_-webfont.woff
less
  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): Ошибка: Может ' t разрешить '/www/fonts/desyrel/desyrel_-webfont.woff' в ''

Как я могу сообщить 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 webpack-file-loader less less-loader resolve-url-loader
person aztechowski    schedule 06.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решение состоит в следующем:

  • игнорировать url-адреса в CSS-загрузчике (url: false)
  • избегать разрешения URL-адресов с помощью 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,
                            },
                        }
                    },
                ],
            },
        ]
    },
person aztechowski    schedule 08.11.2020