Question

Compiles Less to CSS.

Use the /doc/webpack-loaders-css-loader or the /doc/webpack-loaders-raw-loader to turn it into a JS module and the ExtractTextPlugin to extract it into a separate file.

安装

npm install --save-dev less-loader less

The less-loader requires less as peerDependency. Thus you are able to control the versions accurately.

示例

将 /doc/webpack-loaders-css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。

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

You can pass any Less specific options to the less-loader via loader options. See the Less documentation for all available options in dash-case. Since we're passing these options to Less programmatically, you need to pass them in camelCase here:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "/doc/webpack-loaders-css-loader"
            }, {
                loader: "less-loader", options: {
                    strictMath: true,
                    noIeCompat: true
                }
            }]
        }]
    }
};

Unfortunately, Less doesn't map all options 1-by-1 to camelCase. When in doubt, check their executable and search for the dash-case option.

Usually, it's recommended to extract the style sheets into a dedicated file in production using the ExtractTextPlugin. This way your styles are not dependent on JavaScript:

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

const extractLess = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: extractLess.extract({
                use: [{
                    loader: "/doc/webpack-loaders-css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractLess
    ]
};

Usage

Imports

Starting with less-loader 4, you can now choose between Less' builtin resolver and webpack's resolver. By default, webpack's resolver is used.

webpack resolver

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

@import "~bootstrap/less/bootstrap";

重要的是只使用 ~ 前缀，因为 ~/ 会解析为主目录。webpack 需要区分bootstrap和〜bootstrap，因为 CSS 和 Less 文件没有用于导入相对文件的特殊语法。@import "file" 与 @import "./file"; 写法相同

Non-Less imports

使用 webpack resolver，你可以引入任何文件类型。你只需要一个导出有效的 Less 代码的 loader。通常，你还需要设置 issuer 条件，以确保此规则仅适用于 Less 文件的导入：

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

Less resolver

If you specify the paths option, the less-loader will not use webpack's resolver. Modules, that can't be resolved in the local folder, will be searched in the given paths. This is Less' default behavior. paths should be an array with absolute paths:

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

In this case, all webpack features like importing non-Less files or aliasing won't work of course.

插件

为了使用插件，只需像下面这样简单设置 plugins 选项：

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

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

Extracting style sheets

Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or hot module replacement in development. In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a FOUC might be visible. Thus it's often still better to have them as separate files in your final production build.

There are two possibilities to extract a style sheet from the bundle:

• extract-loader (simpler, but specialized on the /doc/webpack-loaders-css-loader's output)
• extract-text-webpack-plugin (more complex, but works in all use-cases)

Source maps

要启用 CSS 的 source map，你需要将 sourceMap 选项传递给 less-loader 和 /doc/webpack-loaders-css-loader。所以你的 `webpack.config.js' 应该是这样：

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

Also checkout the sourceMaps example.

如果你要编辑 Chrome 中的原始 Less 文件，这里有一个很好的博客文章。此博客文章是关于 Sass 的，但它也适用于 Less。

CSS modules gotcha

There is a known problem with Less and CSS modules regarding relative file paths in url(...) statements. See this issue for an explanation.