前言
如果赶时间请直接使用目录跳到解决问题的部分。
使用的项目使用vue脚手架生成。
npm init vue@latest
版本如下
"@vitejs/plugin-vue": "^5.0.4",
"vue": "^3.4.21"
由于近期在学less,心想如果不能将其应用到vue项目中,无异于纸上谈兵。于是立即用vue脚手架创建了一个新的vue项目,兴冲冲地安装上了less依赖,于是漫长之路开始了。
目的
需要强调的是,我们的目的是,在各个vue文件中,可以不引入全局less文件就能使用less变量。
过程
注意,这个是踩坑过程,不要跟着这个做。
安装依赖
cnpm install -D less less-loader
说实话这一部分也蛮坑的,不少博客写的都是–save。
vue add style-resources-loader
这一步卡了非常久,特意花时间去了解cmd命令行的网络代理。
接下来就众说纷纭了,有说只需要修改vue.config.js的↓
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 全局less变量存储路径
path.resolve(__dirname, './src/assets/css/base.less'),
]
}
}
}
有说要安装vue-cli-plugin-style-resources-loader这个依赖的↓
cnpm i -D vue-cli-plugin-style-resources-loader
还有的也是修改vue.config.js,不过我没试,如下图↓
除了少部分我没有尝试的之外,这些无一例外都没有作用。于是我开始思考。从
vue add style-resources-loader
这个命令我就开始奇怪,为什么新出现的是vue.config.js而不是修改vite.config.js。经过前面的尝试后,我脑中浮现一个猜测,那就是vue.config.js根本就没有起作用,因为我们用的构建工具是vitejs,而以前的vue不是,所以这些人的说法可能没有错,但是过时了。于是我开始寻找vite的解决方法,不出意外很快就解决了问题。
解决
首先确认我们是用vue脚手架创建项目的。
- 安装依赖
cnpm i less -D
走完第一步其实已经可以使用内嵌的less样式
<style lang="less" scoped>
@red: red;
.box{
.test{
height: 100px;
width: 100px;
background-color: @red;
}
}
</style>
- 修改vite.config.js,添加下面这段
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: 'true; @import "@/assets/less.less"'
},
javascriptEnabled: true
}
}
}
@众所周知对应src目录,只需要对应修改这个全局less的目录即可。
对应下面的代码修改即可,加上css那部分就行了。
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 核心代码
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: 'true; @import "@/assets/less.less"'
},
javascriptEnabled: true
}
}
}
})
结语
没想到连less-loader也没有用上,前端变化太快确实是让人头疼。
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容