Vue CLI中通过API获取全局Sass/Scss变量注入方案问询

你的问题核心在于vue.config.js是同步加载执行的，而Axios的get请求是异步操作——当Webpack读取你的配置时，异步请求还没返回结果，所以最终导出的配置根本没包含API获取到的颜色变量。下面给你几个可行的解决方案：

方案一：使用同步HTTP请求库（构建阶段专用） #

因为是在构建过程中获取配置，用同步请求不会影响应用运行时的性能，只是构建时会等待请求完成。我们可以用sync-request这个库来实现同步请求：

1. 先安装依赖：

npm install sync-request --save-dev

2. 修改vue.config.js：

const request = require('sync-request');

try {
  // 发起同步GET请求
  const res = request('GET', 'https://api.example.com');
  const data = JSON.parse(res.getBody('utf8'));
  const color = data.app.skin.color;

  module.exports = {
    css: {
      loaderOptions: {
        sass: {
          // 注意：Vue CLI 4+ 里sass-loader的选项是additionalData而非旧版的data
          additionalData: `
$font: 'my font';
$host: 'example.com';
$turquaz: ${color.turquaz};
$green: ${color.green};
$green_dark: ${color.green_dark};
$green_darker: ${color.green_darker};
$yellow: ${color.yellow};
$yellow_dark: ${color.yellow_dark};
$yellow_darker: ${color.yellow_darker};
$red: ${color.red};
$red_dark: ${color.red_dark};
$red_darker: ${color.red_darker};
$white: ${color.white};
$grey: ${color.grey};
$dark: ${color.dark};
$dark_overlay: ${color.dark_overlay};
@import '@/styles/main.scss';
          `
        }
      }
    }
  }
} catch (err) {
  console.error('Failed to fetch theme colors:', err);
  // 这里设置默认颜色作为降级方案
  module.exports = {
    css: {
      loaderOptions: {
        sass: {
          additionalData: `
$font: 'my font';
$host: 'example.com';
// 默认主题色示例
$turquaz: #1abc9c;
$green: #2ecc71;
$green_dark: #27ae60;
// ...其他默认变量
@import '@/styles/main.scss';
          `
        }
      }
    }
  }
}

方案二：预先生成SCSS变量文件（构建前脚本） #

另一种思路是在构建前先执行一个脚本，用同步请求获取颜色数据，生成一个包含变量的SCSS文件，再在vue.config.js里导入这个文件：

1. 新建脚本文件scripts/generate-theme-vars.js：

const request = require('sync-request');
const fs = require('fs');

try {
  const res = request('GET', 'https://api.example.com');
  const data = JSON.parse(res.getBody('utf8'));
  const color = data.app.skin.color;

  // 生成SCSS变量内容
  const scssContent = `
$font: 'my font';
$host: 'example.com';
$turquaz: ${color.turquaz};
$green: ${color.green};
$green_dark: ${color.green_dark};
$green_darker: ${color.green_darker};
$yellow: ${color.yellow};
$yellow_dark: ${color.yellow_dark};
$yellow_darker: ${color.yellow_darker};
$red: ${color.red};
$red_dark: ${color.red_dark};
$red_darker: ${color.red_darker};
$white: ${color.white};
$grey: ${color.grey};
$dark: ${color.dark};
$dark_overlay: ${color.dark_overlay};
`;

  // 写入到项目的样式目录
  fs.writeFileSync('./src/styles/theme-vars.scss', scssContent);
  console.log('Theme variables generated successfully!');
} catch (err) {
  console.error('Failed to generate theme variables:', err);
  // 写入默认变量作为降级
  const defaultScss = `
$font: 'my font';
$host: 'example.com';
$turquaz: #1abc9c;
$green: #2ecc71;
$green_dark: #27ae60;
// ...其他默认变量
`;
  fs.writeFileSync('./src/styles/theme-vars.scss', defaultScss);
}

2. 修改package.json的scripts，利用npm钩子在构建/启动前执行脚本：

{
  "scripts": {
    "prebuild": "node scripts/generate-theme-vars.js",
    "build": "vue-cli-service build",
    "preserve": "node scripts/generate-theme-vars.js",
    "serve": "vue-cli-service serve"
  }
}

pre前缀是npm的内置钩子，会自动在对应命令（如build、serve）执行前运行指定脚本。

3. 修改vue.config.js导入生成的变量文件：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
@import '@/styles/theme-vars.scss';
@import '@/styles/main.scss';
        `
      }
    }
  }
}

方案三：运行时动态注入（适合主题切换场景） #

如果你的需求是在应用运行时动态切换主题（而非构建时固定），可以把颜色变量挂载到全局，通过内联样式或动态class实现：

1. 在main.js里获取颜色数据并挂载到Vue原型：

import Vue from 'vue';
import axios from 'axios';
import App from './App.vue';

axios.get('https://api.example.com').then(res => {
  const color = res.data.app.skin.color;
  Vue.prototype.$themeColors = color;
  // 初始化应用
  new Vue({
    render: h => h(App)
  }).$mount('#app');
}).catch(err => {
  console.error(err);
  // 用默认颜色初始化
  Vue.prototype.$themeColors = {
    turquaz: '#1abc9c',
    green: '#2ecc71',
    // ...其他默认值
  };
  new Vue({
    render: h => h(App)
  }).$mount('#app');
});

2. 在组件中使用：

<template>
  <div :style="{ backgroundColor: $themeColors.turquaz, color: $themeColors.white }">
    动态主题内容
  </div>
</template>

这种方式无法直接使用SCSS变量，但适合需要运行时切换主题的场景。

内容的提问来源于stack exchange，提问作者cagcak