VUE CLI3 less global variable references

method one

1, adding a dependency style-resources-loader

2, vue.config.js added

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [],
    },
  },
};

3, add the global introduction of less

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/varibles.less'),
      ],
    },
  },
};

4. Add path

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/varibles.less'),
      ],
    },
  },
};

Method Two

const path = require('path')

module.exports = {
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    }
}

function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, 'src/styles/variable.less'), // 需要全局导入的less
            ],
        })
}

Method Three

module.exports = {
  css: {
    loaderOptions: {
      less: {
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}