Question

npm i -D less less-loader

在 src/assets/less 目录下新建 variables.less 文件，并定义全局 less 变量

vue.config.js 中为其添加相应 less 配置:

const path = require('path')
const fs = require('fs')
const postcss = require('postcss')
const resolve = dir =path.resolve(__dirname, dir)

const IS_PROD = ['prod', 'production'].includes(process.env.NODE_ENV)

function getLessVaribles(fileUrl, list = {}) {
  if (!fs.existsSync(fileUrl)) return {};
  let lessFile = fs.readFileSync(fileUrl, 'utf8');
  return postcss.parse(lessFile).nodes.reduce((acc, curr) ={
    acc[`${curr.name.replace(/\:/, '')}`] = `${curr.params}`;
    return acc;
  }, list);
}

const modifyVars = getLessVaribles(resolve('./src/assets/less/variables.less'));

module.exports = {
  css: {
    extract: IS_PROD,
    // sourceMap: false,
    loaderOptions: {
      less: {
        modifyVars,
        javascriptEnabled: true,
      }
    }
  }
}