Travailler avec LESS dans Webpack
Apprenons maintenant à travailler avec le préprocesseur LESS. Pour cela, nous devons d'abord installer LESS lui-même :
npm install less --save-dev
Puis le loader correspondant :
npm install less-loader --save-dev
Supposons maintenant que plusieurs fichiers LESS soient importés par le point d'entrée :
import './styles1.less';
import './styles2.less';
Configurons Webpack pour que le code LESS soit transformé en CSS :
export default {
entry: './src/index.js',
rules: [
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
],
};
Et maintenant, configurons Webpack pour que le CSS transformé soit rassemblé en un bundle commun :
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.less$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
};
Connectez plusieurs fichiers LESS à votre point d'entrée. Compilez-les en CSS.
