VUE学习笔记:17.模块化开发之webpack打包less文件

Posted new nm个对象

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE学习笔记:17.模块化开发之webpack打包less文件相关的知识,希望对你有一定的参考价值。

在这里插入图片描述

1.使用webpack打包less文件步骤

实际上在项目中,常用的样式文件不是css,而是使用less、scss或者stylus等来定义样式。那么如果要对这些文件打包应该如何处理呢?

我们以打包less文件为例:

(1)前期准备

第一步:安装loader

  • 安装less

less是npm的第三方包,如果要把less文件转化为css文件,需要依赖less包。

npm install less@3.9.0 --save-dev
  • 安装less-loader

less-loader:用于使用webpack将less文件转化为css文件

npm install less-loader@4.1.0 --save-dev
  • 安装css-loader

css-loader主要用于webpack加载css文件。

npm install css-loader@3.0.0 --save-dev
  • 安装style-loader

style-loader用于将css文件内容渲染到页面DOM中。

npm install style-loader@2.0.0 --save-dev

安装完成后,在项目的package.json文件中应该有记录
在这里插入图片描述
注意:尽量使用指定版本,防止版本冲突

第二步:在webpack配置文件webpack.config.js中配置loader

let path = require('path') //导入path模块

module.exports = {
	entry: './src/main.js',
	output: {
		// 动态获取路径。path.resolve()函数是将两个路径拼接在一起
		// __dirname是获取当前文件的绝对路径
		path: path.resolve(__dirname,'dist'),
		filename: 'build.js'
	},
	module:{
		rules:[
			{
				test: /\\.css$/, //正则表达式匹配.css结尾的文件
				//指定需要使用哪些loader
				// 注意:使用的顺序是先使用css-loader加载文件,然后使用style-loader解析css文件
				//因为webpack在读取多个loader时,是从右往左读,所以将css-loader放在后面
				use:['style-loader','css-loader']
			},
			{
				test: /\\.less$/,//正则表达式匹配.less结尾的文件
				//webpack会先使用less-loader将less文件转换为css文件,然后使用css-loader加载文件,最后使用style-loader解析css文件
				//loader的顺序不能随意改变
				use:['style-loader','css-loader','less-loader']
			}
		]
	}
}

(2)webpack打包less文件

第一步:现在项目的css目录下创建less文件aaa.less
在这里插入图片描述

@funtsize: 50px;
@funtcolor: yellow;

body{
	font-size: @funtsize;
	color: @funtcolor;
}

第二步:在webpack打包入口文件(main.js)中引入less文件

import {add,mul} from "./mathuntils.js"

console.log(add(10,20))
console.log(mul(10,20))

// 引入css文件依赖
require('../css/nomal.css')

//引入less文件依赖
require('../css/aaa.less')

第三步:使用webpack打包npm run build

在这里插入图片描述

第四步:在index.html文件中引入webpack打包的出口文件(build.js)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>你好啊</h3>
		<script src="../dist/build.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

然后运行index.html文件如下:
在这里插入图片描述
可以看到字体大小,颜色都改变了。说明我们的less文件生效了

以上是关于VUE学习笔记:17.模块化开发之webpack打包less文件的主要内容,如果未能解决你的问题,请参考以下文章

VUE学习笔记:20.模块化开发之webpack结合VUE使用

VUE学习笔记:18.模块化开发之webpack打包图片文件

VUE学习笔记:22.模块化开发之webpack搭建本地服务器

VUE学习笔记:15.模块化开发之webpack使用配置文件打包

VUE学习笔记:16.模块化开发之webpack打包css文件

VUE学习笔记:14.模块化开发之webpack简介,安装及基本使用