P11.6-webpack配置less-loader - 华为云社区

这篇再介绍下使用less-loader插件安装配置，通过这篇案例以后我们就可以复制它的步骤，举一反三安装更多的插件。

2.创建less项目. 2.1.创建项目. 创建项目 ... 云社区 博客 博客详情 微信 微博 分享文章到微博 复制链接 复制链接到剪贴板 P11.6-webpack配置less-loader brucexiaogui 发表于2021/11/2523:50:18 2021/11/25 【摘要】 P11.6-webpack配置less-loader 文章目录 P11.6-webpack配置less-loader1.概述2.创建less项目2.1.创建项目2.2.配置项目 3.安装配... P11.6-webpack配置less-loader 文章目录 P11.6-webpack配置less-loader 1.概述 2.创建less项目 2.1.创建项目 2.2.配置项目 3.安装配置less-loader 3.1.安装less-loader 3.2.配置less-loader 4.构建项目 4.1.构建项目 4.2.运行项目查看效果 1.概述 在上一篇介绍了如何安装配置loader，只要是我们需要的扩展功能都可以在webpack官网中找到对应的插件，然后安装就可以使用它的功能非常的方便。

这篇再介绍下使用less-loader插件安装配置，通过这篇案例以后我们就可以复制它的步骤，举一反三安装更多的插件。

2.创建less项目 2.1.创建项目 创建项目这里不再重复介绍，只需要按照上篇《P11.5-webpack配置css-loader》步骤全部执行一遍就可以了。

P11.5-webpack配置css-loader地址:P11.5-webpack配置css-loader 项目完整结构 2.2.配置项目 添加less格式文件在src的css文件夹中添加normal.less文件，内容如下。

body{ background-color:red; } 1 2 3 main.js引入normal.less //1.使用commonjs的模块化规范导入模块 const{add,mul}=require('./js/mathUtils'); console.log(add(10,20)); console.log(mul(10,20)); //2.使用ES6的模块化的规范导入模块 import{name,age,height}from"./js/info"; console.log(name); console.log(age); console.log(height); //导入css文件 require('./css/normal.css'); //----------下面都是lsee项目新增的内容---------- //导入less文件 require('./css/special.less'); //向index.html中写入内容测试less是否生效 document.writeln('

你好啊,less!

') 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 3.安装配置less-loader webpack的loader使用有两个步骤： 下载对应的loader webpack.config.js配置安装的loader 3.1.安装less-loader 访问webpack官网：https://www.webpackjs.com/loaders/less-loader/ 复制less-loader安装命令进行安装 #进入到项目根目录 cd/04-webpack的less-loader #执行安装less-loader #因为我们上面安装局部webpack指定的版本较低，所以这里安装less-loader也要指定低版本，高版本不兼容。

[email protected] 1 2 3 4 5 3.2.配置less-loader 复制官网less-loader配置内容到我们项目的webpack.config.js中。

webpack.config.js添加less-loader内容 //导入path模块，这个path会自动从我们安装node包中找到path导出的模块 constpath=require('path') //webpack模块化默认使用的是CommonJS module.exports={ //入口：将webpack打包命令中源文件入口路径配置到这里 entry:'./src/main.js', //出口：将webpack打包命令中输出文件路径配置到这里 output:{ //./dist改写为绝对路径,path.resolve()获取绝对路径的方法，__dirname：表示当前文件的绝对路径 path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, //配置webpack扩展插件loader module:{ rules:[ { //正则匹配以css结尾的文件 test:/\.css$/, use:['style-loader','css-loader'] }, //配置less-loader { test:/\.less$/, use:[{ loader:"style-loader"//createsstylenodesfromJSstrings },{ loader:"css-loader"//translatesCSSintoCommonJS },{ loader:"less-loader"//compilesLesstoCSS }] } ] } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 4.构建项目 4.1.构建项目 #进入到项目根目录 cd/04-webpack的less-loader #npm构建项目 npmrunbuild #构建后的效果 Hash:cfe00ec60ec1e91e1faf Version:webpack3.6.0 Time:622ms AssetSizeChunksChunkNames bundle.js22.8kB0[emitted]main [2]./src/main.js518bytes{0}[built] [3]./src/js/mathUtils.js197bytes{0}[built] [4]./src/js/info.js154bytes{0}[built] [5]./src/css/normal.css1.1kB{0}[built] [6]./node_modules/css-loader/dist/cjs.js!./src/css/normal.css181bytes{0}[built] [8]./src/css/special.less1.23kB{0}[built] [9]./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/special.less191bytes{0}[built] +3hiddenmodules 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 4.2.运行项目查看效果 使用VScode开发工具运行项目的index.html文件在浏览器上查看less文件定义的文字字号和颜色以加载出来。

文章来源:brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。

原文链接：brucelong.blog.csdn.net/article/details/111227178 【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：[email protected]进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

Less webpack 点赞 收藏 关注作者 作者其他文章 评论（0） 登录后可评论，请登录或注册 0/1000 评论 抱歉，系统识别当前为高风险访问，暂不支持该操作 评论 全部回复 上滑加载中 设置昵称 在此一键设置昵称，即可参与社区互动！ *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消 关于作者 推荐阅读 相关产品 新窗 关闭