less-loader | webpack 中文文档 - 印记中文

webpack 将Less 编译为CSS 的loader。

快速开始. 首先，你需要先安装 less 和 less-loader ： $ npm install less less-loader --save-dev. 然后将该loader 添加到 ... 翻译/文档内容有任何问题，请联系我们Webpack5Webpack4PrintSectionLoaders文件JSON语法转换模板样式框架Awesomebabel-loader安装用法选项疑难解答babel-loader很慢！Babel在每个文件都插入了辅助代码，使代码体积过大！babel的Node.jsAPI已经被移到babel-core中。

排除不应参与转码的库根据webpack部署目标(target)的自定义配置自定义loader示例customOptions(options:Object):{custom:Object,loader:Object}config(cfg:PartialConfig):Objectresult(result:Result):ResultLicensecoffee-loader起步选项示例CoffeeScript与BabelLiterateCoffeeScript贡献许可css-loader快速开始配置项urlimportmodulesimportLoaderssourceMapesModuleexportType示例推荐使用/*webpackIgnore:true*/注释禁用url解析AssetsExtract纯CSS，CSS模块和PostCSS使用别名解析未解析的URLNamedexportwithcustomexportnames只允许可交互的CSS使其与CSSModule特性分离ContributingLicenseexports-loader快速开始内联使用配置文件配置项typeexports贡献Licenseexpose-loader快速开始内联使用配置文件配置项exposes贡献Licensehtml-loader快速开始选项sourcespreprocessorminimizeesModule示例使用注释禁用url解析rootsCDN处理script和link标签模板PostHTML导出为HTML文件贡献许可证imports-loader快速开始内联使用配置项配置项typeimportswrapperadditionalCodeContributingLicenseless-loader快速开始可选项lessOptionsadditionalDatasourceMapwebpackImporterimplementation示例常规用法Sourcemaps生产环境导入插件提取样式CSSmodules陷阱贡献许可node-loader快速开始内联配置选项flagsname贡献Licensepostcss-loader快速开始选项executepostcssOptionssourceMapimplementation例子SugarSSAutoprefixerPostCSSPresetEnvCSSModules提取CSS触发资源打包添加dependencies、contextDependencies、buildDependencies、missingDependencies贡献Licensepug-loaderremark-loader用法OptionsremarkOptionsremoveFrontMatter启发示例Markdown转为HTMLMarkdown转为Markdown贡献Licensesass-loader快速开始解析import的规则url(...)的问题配置选项implementationsassOptionssourceMapadditionalDatawebpackImporterwarnRuleAsWarning示例提取样式表Sourcemaps贡献Licensesource-map-loader起步选项filterSourceMappingUrl示例忽略警告贡献许可style-loader快速开始OptionsinjectTypeattributesinsertstyleTagTransformbaseesModule示例推荐NamedexportforCSSModulesSourcemapsNonceContributingLicensestylus-loader快速开始可选项stylusOptionssourceMapwebpackImporteradditionalDataimplementation示例常规用法Sourcemapsstylus中使用nib导入JSON文件生产环境webpack解析器Stylusresolver提取样式贡献许可thread-loader快速开始示例贡献Licenseval-loaderGettingStartedOptionsexecutableFileReturnObjectPropertiescodesourceMapastdependenciescontextDependenciesbuildDependenciescacheableExamplesSimpleModernizrFigletContributingLicenseless-loader webpack将Less编译为CSS的loader。

快速开始首先，你需要先安装less和less-loader：$npminstalllessless-loader--save-dev 然后将该loader添加到webpack的配置中去，例如：webpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, loader:[ //compilesLesstoCSS 'style-loader', 'css-loader', 'less-loader', ], }, ], }, };接着使用你习惯的方式运行webpack。

可选项名称类型默认值描述lessOptions{Object|Function}{relativeUrls:true}Less的可选项。

additionalData{String|Function}undefined在入口文件起始或末尾添加Less代码。

sourceMap{Boolean}compiler.devtool是否生成sourcemap。

webpackImporter{Boolean}true是否启用默认的webpackimporter。

implementation{Object|String}less配置Less使用的实现库lessOptions类型:Object|Function 默认值:{relativeUrls:true}通过lessOptions属性，你可以设置loaderoptions中的任意特定的选项值给less-loader。

所有可用的选项值请参看Less命令行可选参数文档。

由于我们是通过编程的方式将这些选项传递给Less，因此您需要将破折号（dash-case）转换为驼峰值（camelCase）后传递它们。

Object使用对象（Object）的形式传递options给Less。

webpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ { loader:'style-loader', }, { loader:'css-loader', }, { loader:'less-loader', options:{ lessOptions:{ strictMath:true, }, }, }, ], }, ], }, };Function允许根据loader的context来设置options，再传递给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类型:String|Function 默认值:undefined在实际入口文件的起始位置添加Less代码。

这种情况下，less-loader只会追加并不会覆盖文件内容。

当你的Less变量依赖环境变量时这个属性将非常有用：ℹ由于你注入了代码，因此它将破坏入口文件的源映射关系。

通常有比这更简单的解决方案，例如多个Less入口文件。

Stringmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ 'style-loader', 'css-loader', { loader:'less-loader', options:{ additionalData:`@env:${process.env.NODE_ENV};`, }, }, ], }, ], }, };FunctionSyncmodule.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; }, }, }, ], }, ], }, };Asyncmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ 'style-loader', 'css-loader', { loader:'less-loader', options:{ additionalData:async(content,loaderContext)=>{ //Moreinformationaboutavailablepropertieshttps://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类型:Boolean 默认值:取决于compiler.devtool的值默认生成的sourcemap取决于compiler.devtool的值。

除了值等于eval和false外，其他值都能生成sourcemapwebpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ 'style-loader', { loader:'css-loader', options:{ sourceMap:true, }, }, { loader:'less-loader', options:{ sourceMap:true, }, }, ], }, ], }, };webpackImporter类型：Boolean 默认值：true启用/禁用webpack默认的importer。

在某些情况下，这样做可以提高性能，但是请慎用，因为可能会使得aliases和以~开头的@import规则失效。

webpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ 'style-loader', 'css-loader', { loader:'less-loader', options:{ webpackImporter:false, }, }, ], }, ], }, };implementation类型：Object|String⚠less-loader已兼容Less3和Less4。

特殊的implementation选项决定使用Less的哪个实现。

重载本地安装的less的peerDependency版本。

此选项只对下游的工具作者有效，以便于Less3到Less4的过渡。

Objectwebpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ 'style-loader', 'css-loader', { loader:'less-loader', options:{ implementation:require('less'), }, }, ], }, ], }, };Stringwebpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ 'style-loader', 'css-loader', { loader:'less-loader', options:{ implementation:require.resolve('less'), }, }, ], }, ], }, };示例常规用法将less-loader、css-loader和style-loader串联起来使用可立即将所有样式应用于DOM。

webpack.config.jsmodule.exports={ module:{ rules:[ { test:/\.less$/i, use:[ { loader:'style-loader',//从JS中创建样式节点 }, { loader:'css-loader',//转化CSS为CommonJS }, { loader:'less-loader',//编译Less为CSS }, ], }, ], }, };不幸的是，Less并没有将所有选项1对1映射为camelCase（驼峰值）。

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

Sourcemaps为了生成CSS的sourcemap,你需要在loader的可选项中设置sourceMap属性。

如果没设置的话loader将会继承你webpack中为生成sourcemap设置的属性值devtool。

webpack.config.jsmodule.exports={ devtool:'source-map',//任何类似于"source-map"的devtool值都可以 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。

导入首先我们会尝试使用内置less解析逻辑，然后再使用webpack解析逻辑（alias和~）。

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

如果less不能解析@import的话，less-loader作为Less的插件将所有的查询结果传递给webpack解析器。

因此你可以从node_modules中导入Less模块。

@import"bootstrap/less/bootstrap";~用法已被废弃，可以从代码中删除（我们建议这么做），但是我们会因为一些历史原因一直支持这种写法。

为什么你可以移除它呢？loader首先会尝试以相对路径解析@import，如果它不能被解析，loader将会尝试在node_modules中解析@import。

只要在包名前加上~，告诉webpack在modules中进行查找。

@import"~bootstrap/less/bootstrap";可以通过resolve.byDependency修改默认解析器配置：webpack.config.jsmodule.exports={ devtool:'source-map',//"source-map"类的devtool都是可以的 module:{ rules:[ { test:/\.less$/i, use:['style-loader','css-loader','less-loader'], }, ], }, resolve:{ byDependency:{ //更多的配置项可以在这里找到https://webpack.js.org/configuration/resolve/ less:{ mainFiles:['custom'], }, }, }, };在其前面加上〜很关键，因为〜/会解析到根目录。

webpack需要区分bootstrap和〜bootstrap，因为CSS和Less文件没有用于导入相对路径文件的特殊语法。

写@import“file”等同于@import“./file”;LessResolver如果指定paths选项，将从指定的paths中搜索模块，这是less的默认行为。

paths应该是具有绝对路径的数组：webpack.config.jsmodule.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选项即可， 具体配置如下：webpack.config.jsconstCleanCSSPlugin=require('less-plugin-clean-css'); module.exports={ ... { loader:'less-loader', options:{ lessOptions:{ plugins:[ newCleanCSSPlugin({advanced:true}), ], }, }, }, ... };ℹ️使用pluginManager.webpackLoaderContext属性可以访问自定义插件中的loadercontext。

module.exports={ install:function(less,pluginManager,functions){ functions.add('pi',function(){ //Loadercontextisavailablein`pluginManager.webpackLoaderContext` returnMath.PI; }); }, };提取样式通过webpack打包CSS有很多好处，比如给引用图片和字体文件路径添加hash,在开发环境可以模块热替换。

另一方面，在生产环境，根据JS来控制应用样式表不是一个好的方式，可能会导致延迟渲染，甚至可能会出现闪烁现象。

因此，在你最终的生产环境中将它们拆分成单独的文件来存放通常是比较好的选择。

有两种从bundle中提取样式表的方式：extract-loader（简单，但得专门指定css-loader的output）MiniCssExtractPlugin（较复杂，但适用于所有的场景）CSSmodules陷阱Less和CSSmodules有一个已知的问题，关于url（...）语句中的相对文件路径，看下这个问题的解释。

贡献如果你还没有看过我们的贡献者指南请先花点时间看一下。

CONTRIBUTING许可MIT编辑此页·打印文档·前往仓库«Previousimports-loaderNext»node-loader3位译者phobaljacob-lcsQC-L