Webpack တွင် SASS နှင့် အလုပ်လုပ်ခြင်း

ယခု SASS preprocessor နှင့် အလုပ်လုပ်ပုံကို သင်ယူကြပါစို့။ ထိုသို့လုပ်ဆောင်ရန် ပထမဆုံးအနေနှင့် SASS ကိုယ်တိုင်ကို ထည့်သွင်းရန် လိုအပ်ပါသည်။

npm install sass --save-dev

ထို့နောက် သက်ဆိုင်ရာ loader ကို ထည့်သွင်းပါ။

npm install sass-loader --save-dev

ယခု အဝင်အမှတ်သို့ SASS ဖိုင်များစွာကို import လုပ်ထားသည်ဟု ယူဆပါစို့။

import './styles1.sass';
import './styles2.sass';

SASS ကုဒ်များကို CSS အဖြစ်သို့ ပြောင်းလဲပေးရန် Webpack ကို ချိန်ညှိကြပါစို့။

export default {
	entry: './src/index.js',
	rules: [
		{
			test: /\.sass/i,
			use: [
				'style-loader',
				'css-loader',
				'sass-loader',
			],
		},
	],
};

ယခု Webpack ကို ပြောင်းလဲထားသော CSS ကို တစ်ခုတည်းသော ဘန်ဒယ်တစ်ခုအဖြစ် စုဆောင်းပေးရန် ချိန်ညှိကြပါစို့။

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

SASS ဖိုင်အချို့ကို သင့်အဝင်အမှတ်သို့ ချိတ်ဆက်ပါ။ ၎င်းတို့ကို CSS အဖြစ် ပြန်လည်တည်းဖြတ်ပါ။