Kufanya Kazi na LESS katika Webpack
Hebu sasa tujifunze kufanya kazi na LESS preprocessor. Ili kufanya hivyo, kwanza tunahitaji kusanikisha LESS yenyewe:
npm install less --save-dev
Kisha loader inayofaa:
npm install less-loader --save-dev
Hebu sasa faili za LESS kadhaa ziingizwe kwenye kituo cha kuingia:
import './styles1.less';
import './styles2.less';
Hebu tusanidishe Webpack ili msimbo wa LESS ubadilishwe kuwa CSS:
export default {
entry: './src/index.js',
rules: [
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
],
};
Na sasa tusanidishe Webpack ili CSS iliyobadilishwa ikusanywe kwenye boriti moja ya pamoja:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.less$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
};
Unganisha faili kadhaa za LESS kwenye kituo chako cha kuingia. Kuza kuwa CSS.
