Answer the question
In order to leave comments, you need to log in
How to solve the problem with loading background-images when building webpack?
I will immediately give fragments of configs and a compressed structure of the project. I am using the latest version of webpack, webpack-dev-server, css-loader and less-loader. Instead of url-loader and file-loader I use the built-in features of webpack 5 (asset/resource and asset/inline).
Less file loading rule (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: [
// тут некоторые пути
]
}
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
type: 'asset/resource',
generator: {
filename: isProd ? 'files/[name]-[contenthash].[ext]' : 'files/[name].[ext]'
},
},
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
.main-logo-container {
background-image: url(/images/main.logo);
}
Module not found: Error: Can't resolve '/images/main.logo' in 'project/src'
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question