概述
本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于webpack打包less或sass资源的相关问题，包括了使用less-loader和sass-loader插件的相关内容，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
下载插件
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;
}
h1 {
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>商城首页~~~~~~</h1>
<p>打包css</p>
<div>
this is a box1
</div>
<div>
this is a box2
</div>
<div>
this is a box3
</div>
</body>
</html>登录后复制index.js
require("../css/style.css")
require("../css/lessstyle.less")
require("../css/sassstyle.scss")
console.log("首页专用js文件");登录后复制执行webpack
html页面
【相关推荐：javascript视频教程、web前端】
以上就是webpack打包less或sass资源详解的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是小巧小丸子为你收集整理的webpack打包less或sass资源详解的全部内容，希望文章能够帮你解决webpack打包less或sass资源详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复