如何将全局常量注入 vue 组件 <style>？

Question

我正在寻找如何将全局（THEME_NAME 在我的示例中）注入所有 vue 组件：

<template>..</template>
<style lang="scss">
    @import "bulmaswatch/<%=THEME_NAME=>/bulmaswatch.scss";

    .foo {
      color: $primary;
    }
</style>

上下文：

我在我的 vue 应用程序 (vue Cli 3) 中使用 darkly theme of bulma css

<template>..</template>
<style lang="scss">
    @import "bulmaswatch/darkly/bulmaswatch.scss";
    .foo {
        color: $primary;
    }
</style>

为了切换到 cyborg 主题，我必须将所有地方的 darkly 替换为 cyborg...

有没有更好的方法？像

<template>..</template>
<style lang="scss">
    @import "bulmaswatch/<%=THEME_NAME=>/bulmaswatch.scss";

    .foo {
      color: $primary;
    }
</style>

然后在Webpack或vue.config.js的某个地方，我们可以决定主题是什么

configureWebpack: () => {
    return {
        plugins: [
            new webpack.DefinePlugin({
                THEME_NAME: "cyborg"
            }),
        ],
    }
}

Answer 1

In order to switch to the cyborg theme, I will have to replace darkly with cyborg everywhere...

如果您使用 重新导出 模式则不会。使用 webpack 不需要任何外部库和代码生成魔法。

基本上，您可以创建一个文件来导入您的主题。我们暂时将其命名为 _my-bulma-theme.scss 并导入 darkly。

// _my-bulma-theme.scss
@import "bulmaswatch/darkly/bulmaswatch.scss";

在您的代码中，您导入此文件而不是直接从 Bulma 导入：

// some-component.vue
<style>
  @import "../../my-bulma-theme";
</style>

// some-other-component.vue
<style>
  @import "../../my-bulma-theme";
</style>

现在，当您想要更改主题时，只需在一处进行更改：_my-bulma-theme.scss 文件。

// _my-bulma-theme.scss
@import "bulmaswatch/cyborg/bulmaswatch.scss";

如何将全局常量注入 vue 组件 <style>？

How to inject Global constant to a vue component <style>?

sass

vue.js

vue-component

bulma