大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“webpack如何打包less或sass资源”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“webpack如何打包less或sass资源”吧!
创新新互联,凭借10多年的成都网站设计、网站建设经验,本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上1000家案例。做网站建设,选创新互联。
less 下载 less包和less-loader
sass 下载node-sass和sass-loader
webpack.config.js
module: { //css打包规则 rules: [{ test: /\.css$/, //把项目中所有以.css结尾的文件打包,插入到html里 use: ["style-loader","css-loader"] //css兼容loader,单独的css文件 }, { test: /\.less$/, use: ["style-loader","css-loader","less-loader"] //从右到左,内联样式 },{ test: /\.scss$/, use: ["style-loader","css-loader","sass-loader"] }] },
lessstyle.less
@width:200px; @height:200px; @color:red; body { margin: 0; padding: 0; } p { color: @color; font-size: 25px; } h2 { color: blue; font-size: 88px; } .box2 { width: @width; height: @height; background-color: @color; }
sassstyle.scss
$w:50px; $h:100px; .box3 { width: $w; height: $h * 3; background-color: greenyellow; color: bisque; }
index.html
Title 商城首页~~~~~~
打包css
this is a box1this is a box2this is a box3
index.js
require("../css/style.css") require("../css/lessstyle.less") require("../css/sassstyle.scss") console.log("首页专用js文件");
执行webpack
html页面
感谢各位的阅读,以上就是“webpack如何打包less或sass资源”的内容了,经过本文的学习后,相信大家对webpack如何打包less或sass资源这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!