Ассетҳо дар бандлҳои CSS дар Webpack

Биёед акнун чунон кунем, то роҳҳо ба файлҳои .png иваз шаванд дар файлҳои CSS ҳангоми сохтан:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist')
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset/resource'
			},
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'bundle.[contenthash].css'
		}),
		new HtmlWebpackPlugin(),
	],
};

Биёед тафтиш кунем, ки ин чӣ тавр кор мекунад. Ба нуқтаи воридшавӣ расмро пайваст кунем ва файл бо услубҳо:

import './images/img.png';
import './styles.css';

Бигзор дар файле бо услубҳо мо истифода кунем роҳ ба расм:

body {
	background: url('images/img.png');
}

Пас аз сохтан дар бандли CSS роҳ ба расм ба нав иваз карда мешавад:

body {
	background: url('верный путь от корня');
}

Дар файли CSS расми заминаро муайян кунед.

Расмро ба нуқтаи воридшавӣ пайваст кунед.

Сохтанро иҷро кунед ва нигаред, ба кадом файл расм нусхабардорӣ карда мешавад ва чӣ тавр нав роҳ дар бандли CSS ба назар мерасад.