vue/cli4x配置less

1. 首先安裝less、less-loader

npm i less-loader less --save-dev 

2. 在vue.config.js中進行配置

module.exports = {
   // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            // less所在文件路徑
            patterns: [path.resolve(__dirname, './src/assets/css/base.less')] 
        }
    },  
}    

3. 在vue文件中的style標簽上增加lang="less"測試

4. 如果有未知的報錯，例如vue-style0loader中的或者其他未知錯誤，看看less-loader版本是不是過高導致webpack不兼容less-loader，vue/cli4x時依賴的webpack版本為4x

// node_modules/vue/package.json
"@types/webpack": "^4.4.22",

// package.json
"less-loader": "^5.0.0",

webpack可以兼容less-loader5.0版本

5. 如果需要定義全局變量，需要安裝style-resources-loader

npm i style-resources-loader --save-dev 

如果安裝這個加載器后報錯，或者找不到這個加載器，那么可以重新安裝一下

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D

正常來說，安裝style-resources-loader時，vue-cli-plugin-style-resources-loader應該會一起安裝了，不過有時候特殊原因導致vue-cli-plugin-style-resources-loader安裝失敗，所以會報錯。安裝完重啟就行了。