vite中配置less,vue3中配置less

魂祈梦發表於2024-03-15

前言

  如果趕時間請直接使用目錄跳到解決問題的部分。  
  使用的專案使用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,不過我沒試,如下圖↓
image

  除了少部分我沒有嘗試的之外,這些無一例外都沒有作用。於是我開始思考。從

vue add style-resources-loader

這個命令我就開始奇怪,為什麼新出現的是vue.config.js而不是修改vite.config.js。經過前面的嘗試後,我腦中浮現一個猜測,那就是vue.config.js根本就沒有起作用,因為我們用的構建工具是vitejs,而以前的vue不是,所以這些人的說法可能沒有錯,但是過時了。於是我開始尋找vite的解決方法,不出意外很快就解決了問題。

解決

  首先確認我們是用vue腳手架建立專案的。

  1. 安裝依賴
cnpm i less -D

走完第一步其實已經可以使用內嵌的less樣式

<style lang="less" scoped>
@red: red;
.box{
  .test{
    height: 100px;
    width: 100px;
    background-color: @red;
  }
}
</style>
  1. 修改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也沒有用上,前端變化太快確實是讓人頭疼。

相關文章