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

使用一些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这个变量呢?

阅读 139
评论
    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;