vue.js - 在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，其中也包含一个 variables.scss。

问题:在 App.vue 中，我在哪里以及如何使用 JS 定义所有这些变量并将其传递给 styles.sass？提前致谢 =)

Answer 1

您不能在 JavaScript 中生成 SCSS 变量(更具体地说，在浏览器端)。 SCSS 是一个从 SCSS 到 CSS 的编译器。即使您在 main.js 中导入 SCSS 文件，它也能正常工作，因为 Webpack/Rollup bundler 在构建时调用 SCSS 编译器。

您可以交替做的是创建 CSS custom properties (非常类似于 SCSS 变量)。在您的 CSS 或 SCSS 中，声明自定义属性 block ，如:

: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');
}