详解webpack如何打包less或sass资源的呢？
导读：这篇文章主要给大家介绍“详解webpack如何打包less或sass资源的呢？”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“详解webpack如何打包less或sass资...
这篇文章主要给大家介绍“详解webpack如何打包less或sass资源的呢？”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“详解webpack如何打包less或sass资源的呢？”文章能对大家有所帮助。
下载插件
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
Title商城首页~~~~~~
打包css
this is a box1 this is a box2 this 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资源的呢？”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 详解webpack如何打包less或sass资源的呢？
本文地址： https://pptw.com/jishu/652853.html