less-loader (Loaders) - Webpack 中文开发手册 - 腾讯云

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

安装. npm install --save-dev less-loader less 腾讯云备案控制台云+社区专栏视频精选问答沙龙云+竞赛团队主页开发者手册腾讯云TI平台TVP实验室搜索搜索关闭创作写文章发视频提问登录注册展开腾讯云·社区登录首页专栏视频精选问答沙龙云+竞赛团队主页开发者手册腾讯云TI平台TVP返回腾讯云官网搜索Bootstrap4Bootstrap3CC++Clojure1.8Codeigniter3CSSDocker17ElectronElixir1.5Erlang20EslintExpressGitGoHTMLHTTPImmutable3.8.1JavaScriptLodash4Lua5.3NginxPHPPhpunit6PythonReactReactnativeRedisReduxRuby2.4SassScikitimageSocket.IOSqliteSVGTensorFlowGuideTypescriptUnderscoreVue2Webpack指南|Guides接口|API概念|Concepts组态|Configuration装载|Loadersbabel-loaderbundle-loadercache-loadercoffee-loadercoffee-redux-loadercoverjs-loadercss-loaderexports-loaderexpose-loaderextract-loaderfile-loadergzip-loaderhtml-loaderi18n-loaderimports-loaderistanbul-instrumenter-loaderjshint-loaderjson-loaderjson5-loaderless-loaderLoadersmocha-loadermulti-loadernode-loadernull-loaderpolymer-webpack-loaderpostcss-loaderraw-loaderreact-proxy-loaderrestyle-loadersass-loaderscript-loadersource-map-loaderstyle-loadersvg-inline-loaderthread-loadertransform-loaderurl-loaderval-loaderworker-loaderyaml-frontmatter-loader插件|PluginsXslt&XpathYarnRxJS5Rollup.jsBabelParcelMobXKoaAngularGulpGruntStylelintStandardJSElementUIiViewUILavasMintUIPostCSSThinkJSNestnpmNode.js教程JSON教程Groovy教程vb.net教程Storm入门教程Hibernate教程Slick教程MongoDB教程Yii2.0webpack装载|Loadersless-loader编译成CSS。

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

安装npminstall--save-devless-loaderless复制越少装载机需要较少的peerDependency。

因此，您可以准确控制版本。

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

//webpack.config.js module.exports={ ... module:{ rules:[{ test:/\.less$/, use:[{ loader:"style-loader"//createsstylenodesfromJSstrings },{ loader:"css-loader"//translatesCSSintoCommonJS },{ loader:"less-loader"//compilesLesstoCSS }] }] } };复制您可以通过加载器选项将任何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：constExtractTextPlugin=require("extract-text-webpack-plugin"); constextractLess=newExtractTextPlugin({ 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" }], //usestyle-loaderindevelopment fallback:"style-loader" }) }] }, plugins:[ extractLess ] };复制用法进口从tless-loader4开始，您现在可以选择Less的内置解析器和webpackt的解析器。

默认情况下，使用webpackt的解析器。

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

less-loader应用一个Less插件，并且将所有查询参数传递给webpackresolver。

所以，你可以从node_modules导入你的less模块。

只要加一个~前缀，告诉webpack去查询模块。

@import"~bootstrap/less/bootstrap";复制重要的是只使用~前缀，因为~/会解析为主目录。

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

@import"file"与@import"./file";写法相同Non-Lessimports使用webpackresolver，你可以引入任何文件类型。

你只需要一个导出有效的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 constCleanCSSPlugin=require("less-plugin-clean-css"); module.exports={ ... { loader:"less-loader",options:{ plugins:[ newCleanCSSPlugin({advanced:true}) ] } }] ... };复制提取样式表使用webpack捆绑CSS具有一些很好的优点，如引用图像和带有散列URL的字体或开发中的热模块替换。

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

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

因此，将它们作为最终生产版本中的单独文件通常更好。

有两种可能性从捆绑中提取样式表：extract-loader（更简单，但专门用于css-loader的输出）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(...)。

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

本文档系腾讯云云+社区成员共同维护，如有问题请联系[email protected]最后更新于：2017-12-18分享分享手册到朋友圈分享手册到QQ分享手册到微博复制手册链接到剪贴板分享扫描二维码扫码关注云+社区领取腾讯云代金券