vue配置less全局变量

1.在vue.config.js中配置css项中的globalVars,这里声明的变量，所有的vue文件less中可以直接使用

const stylesModle = require('./src/styles/antd-variables.ts')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        globalVars: stylesModle.generateModifyVars(),
        javascriptEnabled: true
      }
    }
  }
 }

2.antd-variables文件中写法，vue-cli使用exports导出，如果是vite，用export就行

function generateModifyVars(dark = false) {
  const primary = '#8fc31f';
  return {
    '@ant-prefix': 'antv',
    '@primary-color': primary,
    '@btn-primary-bg': primary,
    'info-color': primary,
    '@processing-color': primary,
    '@btn-primary-color': '#fff',
    'success-color': '#55D187', //  Success color
    'error-color': '#ED6F6F', //  False color
    'warning-color': '#EFBD47', //   Warning color
    'font-size-base': '14px', //  Main font size
    'border-radius-base': '2px', //  Component/float fillet
    'link-color': primary, //   Link color
    'app-content-background': '#fafafa', //   Link color
    'layout-header-height': '56px',
    'layout-header-padding': '0px',
    'layout-header-background': 'linear-gradient(90.13deg, #435062 0%, #586472 90.54%)'
  };
}
exports.generateModifyVars = generateModifyVars