less-loader

Загрузчик Less для webpack. Преобразует Less в CSS.

Начало работы

Для начала вам потребуется установить less и less-loader:

npm install less less-loader --save-dev

или

yarn add -D less less-loader

или

pnpm add -D less less-loader

Затем добавьте загрузчик в вашу конфигурацию webpack. Например:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

И запустите webpack с помощью вашего предпочитаемого метода.

Параметры

• lessOptions
• additionalData
• sourceMap
• webpackImporter
• implementation
• lessLogAsWarnOrErr

lessOptions

Тип:

type lessOptions = import('less').options | ((loaderContext: LoaderContext) => import('less').options})

Значение по умолчанию: { relativeUrls: true }

Вы можете передать любые параметры Less в less-loader через свойство lessOptions в параметрах загрузчика. Обратитесь к документации Less для всех доступных параметров в формате с дефисами. Поскольку мы передаём эти параметры в Less программно, вам необходимо передать их здесь в формате с верхним регистром:

object

Используйте объект для передачи параметров в Less.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                strictMath: true,
              },
            },
          },
        ],
      },
    ],
  },
};

function

Позволяет установить параметры, передаваемые в Less, на основе контекста загрузчика.

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: (loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return {
                    paths: ["absolute/path/c", "absolute/path/d"],
                  };
                }

                return {
                  paths: ["absolute/path/a", "absolute/path/b"],
                };
              },
            },
          },
        ],
      },
    ],
  },
};

additionalData

Тип:

type additionalData =
  | string
  | ((content: string, loaderContext: LoaderContext) => string);

Значение по умолчанию: undefined

Добавляет/присоединяет Less код к фактическому входному файлу. В этом случае less-loader не будет перезаписывать исходный код, а только добавит содержимое входа.

Это особенно полезно, когда некоторые из ваших переменных Less зависят от среды:

Поскольку вы вставляете код, это нарушит сопоставления исходных данных в вашем входном файле. Часто есть более простое решение, чем это, например, несколько файлов Less с отдельными входами.

string

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: `@env: ${process.env.NODE_ENV};`,
            },
          },
        ],
      },
    ],
  },
};

function

Sync

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: (content, loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return "@value: 100px;" + content;
                }

                return "@value: 200px;" + content;
              },
            },
          },
        ],
      },
    ],
  },
};

Async

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: async (content, loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.less") {
                  return "@value: 100px;" + content;
                }

                return "@value: 200px;" + content;
              },
            },
          },
        ],
      },
    ],
  },
};

sourceMap

Тип:

type sourceMap = boolean;

Значение по умолчанию: зависит от значения compiler.devtool

По умолчанию, генерация карт исходных данных зависит от опции devtool. Все значения, кроме eval и false, включают генерацию карт исходных данных.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

webpackImporter

Тип:

type webpackImporter = boolean;

Значение по умолчанию: true

Включает/отключает импорт по умолчанию webpack.

В некоторых случаях это может улучшить производительность. Используйте с осторожностью, поскольку псевдонимы и @import из node_modules не будут работать.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              webpackImporter: false,
            },
          },
        ],
      },
    ],
  },
};

implementation

Тип:

type implementation = object | string;

less-loader совместим с версиями Less 3 и 4

Специальный параметр implementation определяет, какую реализацию Less использовать. Переопределяет локально установленную версию peerDependency less.

Этот параметр полезен в основном для авторов инструментов нижележащего уровня для упрощения перехода с Less 3 на 4.

object

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              implementation: require("less"),
            },
          },
        ],
      },
    ],
  },
};

string

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              implementation: require.resolve("less"),
            },
          },
        ],
      },
    ],
  },
};

lessLogAsWarnOrErr

Тип:

type lessLogAsWarnOrErr = boolean;

Значение по умолчанию: false

Преобразование предупреждений и ошибок Less в предупреждения и ошибки webpack, а не просто в логи.

warning.less

div {
  &:extend(.body1);
}

Если lessLogAsWarnOrErr установлено на false, это будет просто логированием, и webpack успешно скомпилируется. Если вы установите этот параметр на true, webpack завершит компиляцию с предупреждением.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessLogAsWarnOrErr: true,
            },
          },
        ],
      },
    ],
  },
};

Примеры

Нормальное использование

Присоедините less-loader с css-loader и style-loader для немедленного применения всех стилей к DOM.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ],
      },
    ],
  },
};

К сожалению, Less не отображает все параметры 1:1 в формате с верхним регистром. В случае сомнений, проверьте их исполняемый файл и найдите параметр с дефисами.

Карты исходных данных

Чтобы включить карты исходных данных для CSS, вам необходимо передать свойство sourceMap в параметрах загрузчика. Если это не передано, загрузчик будет учитывать значение для карт исходных данных webpack, установленное в devtool.

webpack.config.js

module.exports = {
  devtool: "source-map", // any "source-map"-like devtool is possible
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

Если вы хотите редактировать исходные файлы Less в Chrome, есть хорошая статья в блоге. Статья относится к Sass, но работает и для Less.

В продакшене

Обычно рекомендуется извлекать таблицы стилей в отдельный файл в продакшене с помощью MiniCssExtractPlugin. Таким образом, ваши стили не зависят от выполнения JavaScript.

Импорты

Сначала мы пытаемся использовать встроенную логику разрешения less, затем логику разрешения webpack.

Разрешитель Webpack

webpack предоставляет усовершенствованный механизм для разрешения файлов. less-loader применяет плагин Less, который передаёт все запросы в разрешитель webpack, если less не смог разрешить @import. Таким образом, вы можете импортировать свои модули Less из node_modules.

@import "bootstrap/less/bootstrap";

Использование ~ устарело и может быть удалено из вашего кода (мы рекомендуем это), но мы всё ещё поддерживаем его по историческим причинам. Почему вы можете его удалить? Загрузчик сначала попытается разрешить @import как относительный путь. Если он не может быть разрешен, загрузчик попытается разрешить @import внутри node_modules.

Параметры разрешителя по умолчанию можно изменить с помощью resolve.byDependency:

webpack.config.js

module.exports = {
  devtool: "source-map", // any "source-map"-like devtool is possible
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  resolve: {
    byDependency: {
      // More options can be found here https://webpack.js.org/configuration/resolve/
      less: {
        mainFiles: ["custom"],
      },
    },
  },
};

Разрешитель Less

Если вы укажете параметр paths, модули будут проверяться в указанных paths. Это является less поведением по умолчанию. paths должен быть массивом с абсолютными путями:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                paths: [path.resolve(__dirname, "node_modules")],
              },
            },
          },
        ],
      },
    ],
  },
};

Плагины

Для использования плагинов, просто установите параметр plugins следующим образом:

webpack.config.js

const CleanCSSPlugin = require('less-plugin-clean-css');

module.exports = {
  ...
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          plugins: [
            new CleanCSSPlugin({ advanced: true }),
          ],
        },
      },
    },
  ...
};

[!ПРИМЕЧАНИЕ]

Доступ к контексту загрузчика pluginManager.webpackLoaderContext внутри пользовательского плагина можно получить через свойство pluginManager.webpackLoaderContext.

module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add("pi", function () {
      // Loader context is available in `pluginManager.webpackLoaderContext`

      return Math.PI;
    });
  },
};

Извлечение таблиц стилей

Использование CSS в связке с webpack имеет некоторые преимущества, такие как ссылки на изображения и шрифты с хешированными URL-адресами или горячая замена модулей в режиме разработки. С другой стороны, в продакшене это не лучшая идея для применения стилей в зависимости от выполнения JavaScript. Рендеринг может быть задержан, или даже может быть виден FOUC. Поэтому часто лучше иметь их в виде отдельных файлов в окончательной сборке продакшена.

Существует два способа извлечения таблиц стилей из пакета:

• extract-loader (проще, но специализируется на выводе css-loader)
• MiniCssExtractPlugin (сложнее, но работает во всех случаях)

Особенности модулей CSS

Известна проблема с Less и CSS-модулями в отношении относительных путей файлов в инструкциях url(...). См. этот вопрос для объяснения.

Участие в разработке

Пожалуйста, посмотрите наши руководства по участию в разработке, если вы этого ещё не сделали.

CONTRIBUTING

Лицензия

MIT