less-loader

less-loader

编译成 CSS。

使用 css-loader 或 raw-loader 将其转换为 JS 模块，然后使用 ExtractTextPlugin 将其提取到单独的文件中。

安装

npm install --save-dev less-loader less

越少装载机需要较少的peerDependency。因此，您可以准确控制版本。

例子

将 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: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

您可以通过加载器选项将任何 Less 特定选项传递给tless-loader。请参阅 Less 文档以查看破折号中的所有可用选项。由于我们将这些选项以编程方式传递给 Less，所以您需要在这里将它们传递给 camelCase：

// 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 不会将所有选项一对一地映射到tcamelCase。如有疑问，请检查其可执行文件并搜索破折号选项。

通常，建议使用 ExtractTextPlugin 将样式表抽取到生产中的专用文件中。这样你的样式就不依赖于 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: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractLess
    ]
};

用法

进口

从tless-loader 4开始，您现在可以选择 Less 的内置解析器和 webpackt的解析器。默认情况下，使用 webpackt的解析器。

webpack 解析器

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"
            }]
        }]
    }
};

解决方案较少

如果你指定了这个paths选项，less-loader 不会使用 webpack 的解析器。在本地文件夹中无法解析的模块将在给定的内容中进行搜索paths。这是较少'的默认行为。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 功能，如导入 non-Less 文件或别名，当然不会起作用。

插件

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

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

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

提取样式表

使用 webpack 捆绑 CSS 具有一些很好的优点，如引用图像和带有散列URL的字体或开发中的热模块替换。另一方面，在生产中，根据 JS 执行来应用样式表不是一个好主意。渲染可能会延迟，甚至可能会看到 FOUC。因此，将它们作为最终生产版本中的单独文件通常更好。

有两种可能性从捆绑中提取样式表：

  • extract-text-webpack-plugin（更复杂，但适用于所有使用情况）

源地图

要启用 CSS 源地图，您需要将sourceMap选项传递给 less-loader 和 css-loader。你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 示例。

如果您想编辑 Chrome 内部的原始 Less 文件，那么有一篇很好的博文。这篇博文是关于 Sass 的，但它也适用于 Less。

CSS 模块陷入困境

语句中有关 Less 和 CSS 模块的相关文件路径存在已知问题url(...)。请参阅此问题以获取解释。