Сразу приведу фрагменты конфигов и сжатую структуру проекта. Использую самую последнюю версию webpack, webpack-dev-server, css-loader и less-loader. Вместо url-loader и file-loader использую встроенные возможности webpack 5 (asset/resource и asset/inline).
Правило загрузки less-файлов (webpack):
{
test: /\.less$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: [
isProd ? MiniCssExtractPlugin.loader : "style-loader",
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
"postcss-flexibility",
["postcss-preset-env", { browsers: browserList }],
]
}
}
},
{
loader: 'less-loader',
options: {
lessOptions: {
includePaths: [
// тут некоторые пути
]
}
}
}
]
},
Правило загрузки изображений (webpack):
{
test: /\.(png|jpe?g|gif)$/,
type: 'asset/resource',
generator: {
filename: isProd ? 'files/[name]-[contenthash].[ext]' : 'files/[name].[ext]'
},
},
Для запуска конфигурации использую
webpack-dev-middleware:
const compiler = webpack(config);
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
stats: config.stats
})
);
Сжатая структура проекта такая:
project
|
|---src
| |---SomeComponent
| |---styles.less
|---images
| |---main-logo.png
|---webpack.config.js
|---package.json
Фрагмент стилей в файле
styles.less:
.main-logo-container {
background-image: url(/images/main.logo);
}
Проблема в том, что при старте проекта (dev и build), вебпак ругается на то, что не может найти файл images/main.logo, указанный в файле стиля styles.less:
Module not found: Error: Can't resolve '/images/main.logo' in 'project/src'
Насколько понимаю, если положить папку images внутрь src, то проблем быть не должно, но к сожалению нет возможности ее туда поместить. Как решить эту проблему с такой структурой папок?
Заранее спасибо за подсказки.