Работа с LESS в Webpack
Давайте теперь научимся работать с препроцессором LESS
. Для этого для начала нам нужно установить сам LESS
:
npm install less --save-dev
Затем соответствующий лоадер:
npm install less-loader --save-dev
Пусть теперь к точке входа импортируются несколько файлов LESS
:
/src/index.jsimport './styles1.less';
import './styles2.less';
Давайте настроим Webpack
так, чтобы LESS
код преобразовывался в CSS
, порядок их перечисления в массиве свойства use
важен, так как загрузчики используются от последнего к первому:
webpack.config.jsexport default {
entry: "./src/index.js",
rules: [
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"],
},
],
};
А теперь настроим Webpack
так, чтобы преобразованный CSS собирался в один общий бандл:
webpack.config.jsexport default {
entry: "./src/index.js",
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.less$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
};