Vue.js 在vuejs中动态创建scss变量

在我的App.vue@mounted（）中，我创建了一个api请求来获取应用程序的内容。 在响应属性“style”中，我得到带有样式的json。看起来是这样的：

"style": {
          "general": {
            "font-family": "",
            "font-color": "",
            "title_font_color": "",
            "h1_font_color": "",
            "background_color": "",
            "sale_background_color": "",
            "radius": ""
          },
          "cta": {
            "cta_color": "",
            "btn_font_color": "",
            "radius": "",
            "bar_background": "",
            "bar_font_color": ""
          },
          "navigation": {
            "normal_color": "",
            "normal_background_color": "",
            "focus_color": "",
            "focus_background_color": ""
          },
          "floating_icons": {
            "main_color": "",
            "phone_color": "",
            "mail_color": "",
            "whatsapp_color": ""
          }
        },

我想生成如下scss变量：

$general_font_family: font-family;
$general_font_color: font-color;

等等。 在main.js中，我导入了styles.sass，其中还包括variables.scss

问：在App.vue中使用JS在何处以及如何定义所有这些变量，并将其传递给styles.sass？

---

提前感谢=）

您无法在JavaScript中生成

SCS

变量（更具体地说，是在浏览器端）。SCSS是从SCSS到CSS的编译器。即使您在

main.js

中导入SCSS文件，由于Webpack/Rollup bundler在构建时调用了SCSS编译器，该文件也能正常工作

您可以交替地创建（非常类似于SCSS变量）。在

CSS

或

SCSS

中，声明自定义属性块，如：

:root {
  /* default value */
  --general-font-family: serif;
}

div {
  /* default value */
  --general-font-color: brown;
}

然后使用JavaScript或VUe组件，您可以开始设置以下CSS自定义属性：

mounted() {
    // Ensure that you have proper reference to HTMLElement
    element.style.setProperty('--general-font-family', 'sans-serif');
}