webpack打包less或sass资源详解

165 阅读 0 评论 109 点赞

我是靠谱客的博主小巧小丸子，这篇文章主要介绍webpack打包less或sass资源详解，现在分享给大家，希望可以做个参考。

本篇文章给大家带来了关于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"]
        }]
    },1
2
3
4
5
6
7
8
9
10
11
12
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;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@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;
}1
2
3
4
5
6
7
8
$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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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文件");1
2
3
4
require("../css/style.css")
require("../css/lessstyle.less")
require("../css/sassstyle.scss")
console.log("首页专用js文件");
登录后复制

执行webpack

html页面

在这里插入图片描述