I'm trying to create an CSS from LESS with webpack. My source folder have following hierarchy:
fonts desyrel desyrel_-webfont.woff less ds-handwritten.less
Content of less file include relative font path, which will be used in the production
@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; }
My entry script is following:
import 'ds-less/ds-handwritten.less';
When I'm trying to run the webpack script, I'm receiving following error:
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve '/www/fonts/desyrel/desyrel_-webfont.woff' in ''
How can I inform webpack, that the relative path of font '/www/fonts/desyrel/desyrel_-webfont.woff' points to font from source path: 'src/fonts/desyrel/desyrel_-webfont.woff'?
I tried to handle the issue with file-loader combined with resolve-url-loader (following the hint from official docu https://webpack.js.org/loaders/sass-loader/#problems-with-url), but without success.
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,
},
}
},
],
},
]
},
The solution is to:
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,
},
}
},
],
},
]
},