Webpack-da LESS bilan ishlash
Keling, endi LESS preprosessori bilan ishlashni o'rganaylik. Buning uchun avvalo LESS-ni o'rnatishimiz kerak:
npm install less --save-dev
Keyin mos loader-ni o'rnatamiz:
npm install less-loader --save-dev
Endi kirish nuqtasiga bir nechta LESS fayllari import qilinsin:
import './styles1.less';
import './styles2.less';
Keling, Webpack-ni sozlaylik, shunda LESS kodi CSS-ga aylantirilsin:
export default {
entry: './src/index.js',
rules: [
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
],
};
Endi Webpack-ni sozlaylik, shunda aylantirilgan CSS bitta umumiy bundl-ga yig'ilsin:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.less$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
};
Bir nechta LESS fayllarini kirish nuqtangizga ulang. Ularni CSS-ga kompilyatsiya qiling.
