Làm việc với LESS trong Webpack

Bây giờ hãy học cách làm việc với bộ tiền xử lý LESS. Để làm điều này, trước hết chúng ta cần cài đặt chính LESS:

npm install less --save-dev

Sau đó là loader tương ứng:

npm install less-loader --save-dev

Bây giờ hãy để một vài file LESS được import vào điểm vào:

import './styles1.less';
import './styles2.less';

Hãy cấu hình Webpack để mã LESS được chuyển đổi thành CSS:

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

Và bây giờ hãy cấu hình Webpack để CSS đã được chuyển đổi được tập hợp thành một bundle chung:

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

Kết nối một vài file LESS vào điểm vào của bạn. Biên dịch chúng thành CSS.