vue文件的script部分能调用vue.config.js里设置的loaderOptions的值吗, 怎么调用？

Question

使用一些UI组件的时候，为了能自定义主题色，可以在vue.config.js里这样设置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#254184', // 全局主色
        }
      }
    }
  }
}

这样能在<style lang="less">中使用该变量：

a {
    color: @primary-color;
}

但是有时候，我需要在js中设置样式，比如绘制canvas。有什么办法可以让我能在js中使用primary-color这个变量呢？

Answer 1

直接import进来使用即可

import config from '../vue.config.js';

export default {
  data() {
    return {
      primaryColor: config.css.loaderOptions.less.modifyVars['primary-color'],
    };
  },

Answer 2

用 Vue 的环境变量：https://cli.vuejs.org/zh/guid...

// .env
VUE_APP_PRIMARY_COLOR=#254184

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': process.env.VUE_APP_PRIMARY_COLOR
        }
      }
    }
  }
}

// sample.js

const primaryColor = process.env.VUE_APP_PRIMARY_COLOR;

Answer 3

特意评论过来感谢，我用ant-vue时配置主题怎么也不生效，看了你问题中用

css: {
    loaderOptions: {
      less: {}
    }
}

这种结构配置一下，果然配置主题可以生效了，之前按照官方文档中间加options或者lessOptions都不行，原来去掉就可以了，虽然暂时还不知道为什么，但是感谢一下，之前一度想一点一点写样式覆盖，现在主题配置生效就方便多了