前言 如果趕時間請直接使用目錄跳到解決問題的部分。 使用的項目使用vue腳手架生成。 npm init vue@latest 版本如下 "@vitejs/plugin-vue": "^5.0.4", "vue": "^3.4.21" 由於近期在學less，心想如果不能將其應用到vue項目中，無異於紙 ...
前言
如果趕時間請直接使用目錄跳到解決問題的部分。
使用的項目使用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也沒有用上，前端變化太快確實是讓人頭疼。
