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 个回答
    • 8.3k

    直接import进来使用即可

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

      用 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;
        撰写回答

        登录后参与交流、获取后续更新提醒