less-loader - 一个webpack的Less加载器。将Less编译成CSS ...

入门. 首先，您需要安装 less 和 less-loader ： npm install less less-loader --save ... webpack 5.72[中文] Loaders less-loader 免责声明：less-loader是由社区成员维护的第三方包，它可能没有与webpack相同的支持、安全策略或许可证，并且它不是由webpack维护的。

一个webpack的Less加载器。

将Less编译成CSS。

入门 首先，您需要安装less和less-loader： npminstalllessless-loader--save-dev or yarnadd-Dlessless-loader or pnpmadd-Dlessless-loader 然后将加载程序添加到您的webpack配置中。

例如： webpack.config.js module.exports={ module:{ rules:[ { test:/\.less$/i, use:[ //少编译成CSS "style-loader", "css-loader", "less-loader", ], }, ], }, }; 并通过您的首选方法运行webpack。

Options lessOptions additionalData sourceMap webpackImporter implementation lessOptions Type: typelessOptions=import('less').options|((loaderContext:LoaderContext)=>import('less').options}) 默认值：{relativeUrls:true} 您可以通过loaderoptions中的lessOptions属性将任何Less特定选项传递给less-loader。

有关破折号的所有可用选项，请参见较少的文档。

由于我们正在以编程方式将这些选项传递给Less，因此您需要在camelCase中将其传递给此处： 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)=>{ //有关可用属性的更多信息https://webpack.js.org/api/loaders/ const{resourcePath,rootContext}=loaderContext; constrelativePath=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: typeadditionalData= |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)=>{ //有关可用属性的更多信息https://webpack.js.org/api/loaders/ const{resourcePath,rootContext}=loaderContext; constrelativePath=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)=>{ //有关可用属性的更多信息https://webpack.js.org/api/loaders/ const{resourcePath,rootContext}=loaderContext; constrelativePath=path.relative(rootContext,resourcePath); if(relativePath==="styles/foo.less"){ return"@value:100px;"+content; } return"@value:200px;"+content; }, }, }, ], }, ], }, }; sourceMap Type: typesourceMap=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: typewebpackImporter=boolean; 默认值：true 启用/禁用默认的webpack导入器。

在某些情况下，这可以提高性能。

请谨慎使用，因为以~开头的别名和@import规则将不起作用。

webpack.config.js module.exports={ module:{ rules:[ { test:/\.less$/i, use:[ "style-loader", "css-loader", { loader:"less-loader", options:{ webpackImporter:false, }, }, ], }, ], }, }; implementation Type: typeimplementation=object|string; 与Less3和4版本兼容的less-loader 特殊的implementation选项确定使用Less的哪个实现。

覆盖本地安装peerDependency的版本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"), }, }, ], }, ], }, }; Examples 正常使用 将less-loader与css-loader和style-loader链接起来,以立即将所有样式应用于DOM。

webpack.config.js module.exports={ module:{ rules:[ { test:/\.less$/i, use:[ { loader:"style-loader",//根据JS字符串创建样式节点 }, { loader:"css-loader",//将CSS转换为CommonJS }, { loader:"less-loader",//少编译成CSS }, ], }, ], }, }; 不幸的是，Less并没有将所有选项1比1映射到camelCase。

如有疑问，请检查其可执行文件并搜索破折号选项。

源地图 要为CSS启用sourcemap，您需要在加载程序的选项中传递sourceMap属性。

如果不通过，装载机将尊重的WebPack源的地图中，设置的设置devtool。

webpack.config.js module.exports={ devtool:"source-map",//any"source-map"-likedevtoolispossible module:{ rules:[ { test:/\.less$/i, use:[ "style-loader", { loader:"css-loader", options:{ sourceMap:true, }, }, { loader:"less-loader", options:{ sourceMap:true, }, }, ], }, ], }, }; 如果您想在Chrome中编辑原始的Less文件，则有一篇不错的博客文章。

该博客文章是关于Sass的，但也适用于Less。

生产中 通常，建议使用MiniCssExtractPlugin将样式表提取到生产中的专用文件中。

这样，您的样式就不必依赖JavaScript。

Imports 首先，我们尝试使用内置的less解析逻辑，然后使用webpack解析逻辑（别名和~）。

WebpackResolver webpack提供了一种高级的文件解析机制。

less-loader应用了Less插件，如果less无法解析@import，则该插件会将所有查询传递给webpack解析器。

因此，您可以从node_modules导入Less模块。

@import"bootstrap/less/bootstrap"; 不建议使用~，并且可以从您的代码中删除它（我们建议使用），但出于历史原因，我们仍然支持它。

为什么可以删除它？加载程序将首先尝试将@import解析为相对的，如果无法解析，则加载程序将尝试在node_modules内部解析@import。

只需在它们前面加上~告诉webpack查找modules。

@import"~bootstrap/less/bootstrap"; 可以通过resolve.byDependency修改默认的解析器选项： webpack.config.js module.exports={ devtool:"source-map",//any"source-map"-likedevtoolispossible module:{ rules:[ { test:/\.less$/i, use:["style-loader","css-loader","less-loader"], }, ], }, resolve:{ byDependency:{ //Moreoptionscanbefoundherehttps://webpack.js.org/configuration/resolve/ less:{ mainFiles:["custom"], }, }, }, }; 仅在~前面加上它很重要，因为~/解析到主目录。

的WebPack需要区分bootstrap和~bootstrap，因为CSS以及减档都导入相对文件没有特殊的语法。

编写@import"file"与@import"./file";相同； 减去解析器 如果指定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 为了使用插件，只需设置如下的plugins选项： webpack.config.js constCleanCSSPlugin=require('less-plugin-clean-css'); module.exports={ ... { loader:'less-loader', options:{ lessOptions:{ plugins:[ newCleanCSSPlugin({advanced:true}), ], }, }, }, ... }; ℹ️可以使用pluginManager.webpackLoaderContext属性访问自定义插件中的加载器上下文。

module.exports={ install:function(less,pluginManager,functions){ functions.add("pi",function(){ //加载器上下文在`pluginManager.webpackLoaderContext`中可用 returnMath.PI; }); }, }; 提取样式表 将CSS与webpack捆绑在一起具有一些不错的优点，例如使用哈希URL引用图像和字体或在开发中替换热模块。

另一方面，在生产中，根据JS执行来应用样式表不是一个好主意。

渲染可能会延迟，甚至可能会看到FOUC。

因此，在最终的产品构建中将它们作为单独的文件通常更好。

从捆绑包中提取样式表有两种可能。

extract-loader（更简单，但专门针对css-loader的输出） MiniCssExtractPlugin（更复杂，但适用于所有用例） CSS模块被抓 Less和CSS模块存在有关url(...)语句中相对文件路径的已知问题。

请参阅此问题以获取解释。

Contributing 如果您还没有阅读我们的投稿指南,请花点时间阅读。

CONTRIBUTING License MIT ©JSFoundation和其他贡献者根据知识共享署名4.0授权。

https://webpack.js.org/loaders/less-loader