vuecli less配置使用步驟

1.安裝less、less-loader包

yarn add less less-loader --save

2.使用less
雖然vuecli起項(xiàng)目時(shí)沒配置less，vuecli其實(shí)已經(jīng)預(yù)設(shè)了less webpack配置，所以上述包安裝后可以直接使用

<style lang="less" scoped>
...
</style>

安裝less-loader getOptions報(bào)錯(cuò)解決辦法

上述安裝使用操作步驟中有一個(gè)坑，社區(qū)很多都沒說對，經(jīng)過本人親測，發(fā)現(xiàn)其中本質(zhì)原因，先說明之，已助后人。

Syntax Error: TypeError: this.getOptions is not a function

因?yàn)閣epack5之后，getOptions函數(shù)可以由webapck提供，less-loader高版本隨之移除自己封裝的getOtions函數(shù)。所以安裝后會報(bào)錯(cuò)。webpack官方解釋如下。

Tip
從 webpack 5 開始，this.getOptions 可以獲取到 loader 上下文對象。它用來替代來自 loader-utils 中的 getOptions 方法。

所以辦法有二，一是升級webpack，二是回退less-loader版本，第二種可實(shí)施性較大，經(jīng)測可將版本回退至less-loader@5.0.0版本即可解決問題。

解決代碼如下:

yarn remove less-loader --dev
yarn add less-loader@^5