less-loader

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

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

Для начала вам нужно установить less-loader.

$ npm install less-loader --save-dev

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader', // compiles Less to CSS
      },
    ],
  },
};

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

Этот less-loader требует less в качестве peerDependency. Это позволяет точно контролировать версии.

Примеры

Присоедините less-loader к css-loader и style-loader, чтобы немедленно применить все стили к DOM.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        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, в less-loader через параметры загрузчика. Обратитесь к документации Less для просмотра всех доступных параметров в формате с дефисами. Поскольку мы передаем эти параметры Less программно, вам нужно передавать их здесь в формате с большой буквы:

webpack.config.js

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

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

В производстве

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

Импорты

Начиная с less-loader 4, вы можете выбрать между встроенным механизмом разрешения Less и механизмом разрешения webpack. По умолчанию используется механизм разрешения webpack.

Механизм разрешения webpack

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

@import '~bootstrap/less/bootstrap';

Важно добавлять префикс только ~, потому что ~/ разрешается до домашнего каталога. webpack необходимо различать bootstrap и ~bootstrap, поскольку файлы CSS и Less не имеют специального синтаксиса для импорта относительных файлов. Запись @import "file" эквивалентна @import "./file";

Импорты, не связанные с Less

Используя механизм разрешения webpack, вы можете импортировать любые типы файлов. Вам просто нужен загрузчик, который экспортирует допустимый код Less. Часто вы также захотите установить условие issuer , чтобы убедиться, что эта настройка применяется только к импортам, исходящим из файлов Less:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        issuer: /\.less$/,
        use: [
          {
            loader: 'js-to-less-loader',
          },
        ],
      },
    ],
  },
};

Механизм разрешения Less

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

webpack.config.js

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

В этом случае все функции webpack, такие как импорт файлов, не связанных с Less, или алиасинг, конечно, не будут работать.

Плагины

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

// webpack.config.js
const CleanCSSPlugin = require('less-plugin-clean-css');

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

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

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

Есть два варианта извлечения таблицы стилей из сборки:

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

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

Чтобы включить карты исходного кода CSS, вам нужно передать параметр sourceMap в less-loader и css-loader. Ваша webpack.config.js должна выглядеть так:

webpack.config.js

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

Также ознакомьтесь с примером sourceMaps.

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

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

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

Содействие

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

CONTRIBUTING

Лицензия

MIT