Vue项目中使用less

如何使用less

• 需要安装less与less-loader，同时版本不宜过高

使用以下命令安装

npm i less@4.1.3 less-loader@5.0.0 --save-dev
或者使用以下方式
yarn add less@4.1.3 less-loader@5.0.0 --save-dev

注意：这边如果不加–dev，包会安装到dependencies中，这样会导致编译不通过。

• 在需要使用的页面中书写以下代码

方式一：组件内部直接使用

<style lang="less" scoped>
	*{
		background-color:red;
	}
</style>

方式二：从组件中抽离使用

定义一个.less为后缀的文件

	*{
		background-color:red;
	}

页面中引入

<style lang="less" scoped>
	@import url("这里填写路径地址")
</style>