Webpack ရှိ CSS ဘန်ဒါကို ပြင်ဆင်ခြင်း

စာမျက်နှာသို့ CSS ထည့်သွင်းခြင်း လေ့လာထားသော နည်းလမ်းသည် အလွန်အဆင်ပြေချင်မှပြေနိုင်သည်။ မကြာခဏဆိုသလို အလုပ်အများဆုံးမှာ CSS ဖိုင်အားလုံးကို သီးခြား စတိုင်ဘန်ဒါတစ်ခုတွင် စုစည်းခြင်းဖြစ်သည်။

ထိုသို့ပြုလုပ်ရန် mini-css-extract-plugin ပလပ်အင်လိုအပ်သည်။ ထို့ကြောင့် ထိုပလပ်အင်ကို တပ်ဆင်ကြပါစို့။

npm install mini-css-extract-plugin --save-dev

ယခု ထိုပလပ်အင်ကို တင်သွင်းကြပါစို့။

import MiniCssExtractPlugin from 'mini-css-extract-plugin';

ယခု plugins ပြင်ဆင်ချက်သို့ ထည့်သွင်းကြပါစို့။

export default {
	entry: './src/index.js',
	plugins: [new MiniCssExtractPlugin()],
};

ယခု style-loader ကို ကျွန်ုပ်တို့၏ပလပ်အင်မှ လိုဒါဖြင့် အစားထိုးကြပါစို့။

export default {
	entry: './src/index.js',
	plugins: [new MiniCssExtractPlugin()],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

ဖော်ပြထားသော ပြင်ဆင်ချက်များကို လုပ်ဆောင်ပါ။