Vue3使用less
文章目录1、配置使用2、遇到的问题1、配置使用以less为例1.1 使用vue add style-resources-loader命令安装1.2 安装完之后,会自动在package.json的同级目录下自动新建一个vue.config.js文件,内容如下:module.exports = {pluginOptions: {'style-resources-loader': {preProcess
·
1、配置使用
以
less
为例
- 1.1 使用
vue add style-resources-loader
命令安装
- 1.2 安装完之后,会自动在
package.json
的同级目录下自动新建一个vue.config.js
文件,内容如下:
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: []
}
}
}
- 1.3 安装
less 以及less-loader
yarn add less less-loader --save-dev
- 1.4 在项目中使用,以
HelloWorld
组件为例
通过
lang='less'
标志使用了less
<template>
<div class='main'>
<div class="text">
hello
</div>
</div>
</template>
<script>
</script>
<style lang='less'>
.main{
.text{
color:red;
}
}
</style>
- 1.5 启动服务
yarn serve
- 1.6 效果展示
2、遇到的问题
- 2.1 如果出现以下错误
,我遇到这个错误的时候,曾以为是配置文件的问题,一顿百度乱打,心情极度复杂,后来灵光一闪会不会是less版本问题
,然后我就将less
的版本将低一个版本,还是出现以上问题,最后我又将less-loader
将低了一个版本,结果如下
说明less-loader版本过高了
,我降低的版本的办法
更多推荐
已为社区贡献1条内容
所有评论(0)