less-loader

安装

npm install --save-dev less-loader less

用法

一起使用less-loader、css-loader和style-loader，添加对 webpack 的 LESS 支持。

通过 webpack 配置、命令行或者内联方式使用这个 loader。

通过 webpack 配置（推荐）

webpack.config.js

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

在你的项目中

import css from 'file.less';

命令行方式（CLI）

webpack --module-bind 'less=style-loader!css-loader!less-loader'

在你的项目中

import css from 'file.less';

内联方式

在你的项目中

import css from 'style-loader!css-loader!less-loader!./file.less';

选项

通过 loader 的选项或者查询参数，你可以将任何 LESS 特定的选项传递给 less-loader。

有关所有可用选项，请参阅LESS 文档。LESS 把 dash-case 为 camelCase。采用值的某些选项（比如 lessc –modify-var=”a=b” ），最好使用JSON 语法处理。

{
  test: /\.less$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'less-loader', options: { strictMath: true, noIeCompat: true } }
    ]
}

插件

为了使用插件，只需在你的 webpack.config.js 文件中，简单地设置 options.lessPlugins 选项既可。

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

{
  test: /\.less$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { importLoaders: 1 } },
    {
      loader: 'less-loader',
      options: { lessPlugins: [ new CleanCSSPlugin({ advanced: true }) ] }
    }
}

Imports

webpack 提供了一种高级的机制解析文件。less-loader 根除 less fileLoader，并且将所有的查询参数传递给 webpack 解析引擎。所以，你可以从 node_modules 导入你的 less 模块。只要加一个 ~ 前缀，告诉 webpack 去查询模块。

@import "~bootstrap/less/bootstrap";

只要加前缀 ~ 十分必要，因为 ~/ 解析为主目录。webpack 需要区分 bootstrap 和 ~bootstrap ，因为 css 和 less 文件对于导入相对路径的文件没有特殊语法。所以写 @import “file” 和 @import “./file”; 是一样的效果。

还要注意，对于CSS 模块，相对文件路径不会生效。请参阅此issue的解释。

Sourcemaps

因为浏览器的限制，只有结合extract-text-webpack-plugin才能使用 suorcemaps。使用这个插件，从生成的JS bundle 中提取 css 代码到一个单独的文件（这样可以提高性能，因为 JS 和 CSS 并行加载）。

webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // 必须是 'source-map' 或者 'inline-source-map'
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract(
          fallbackLoader: 'style-loader',
          loaders: [
            // 通过 loader 参数激活 source maps
            {
              loader: 'css-loader',
              options: { sourceMap: true, importLoaders: 1 }
            },
            {
              loader: 'less-loader',
              options: { sourceMap: true }
            }
          ]
        )
      }
    ]
  },
  plugins: [
    // 提取 CSS 到单独的文件中
    new ExtractTextPlugin('app.bundle.css')
  ]
}

如果你想在Chrome浏览器中查看原始的LESS文件，甚至编辑它。有一篇很好的博客文章。查看test/sourceMap目录，获取运行例子。要确保使用HTTP服务器提供内容。

贡献

不要犹豫啦，创建一个PR。每一份奉献都是值得欣赏的。在开发中，你可以通过运行 npm test 启动测试。

测试基本上只是比较生成的 css 文件和位于 test/css 目录下的引用 css 文件。通过运行 node test/helpers/generateCss.js ，你可以轻松地生成引用 css 文件。它将 less 文件传递给 less，并且把输出写入到 test/css 文件夹下。

维护者

Johannes Ewald

原文：https://webpack.js.org/loaders/less-loader/