在vuejs中动态创建scss变量

Question

在我的 App.vue @mounted() 中，我创建了一个 api 请求来获取我的应用程序的内容。在响应属性“样式”中，我得到带有样式的 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，其中也包含变量.scss。

问题：在 App.vue 中如何使用 JS 定义所有这些变量并将其传递给 styles.sass？预先感谢 =)

Answer 1

您无法在 JavaScript 中生成SCSS变量（更具体地说，在浏览器端）。SCSS是一个从SCSS到CSS的编译器。即使您在 中导入 SCSS 文件main.js，它也会正常工作，因为 Webpack/Rollup 捆绑程序在构建时调用 SCSS 编译器。

您还可以做的是创建CSS 自定义属性（与 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');
}