Question

我正在搜索如何向所有vue组件注入全局（在我的示例中为 THEME_NAME ）：

上下文：

我正在使用 darkly 主题 =“ https://bulma.io/” rel =“ nofollow noreferrer”>我的vue应用程序（vue Cli 3）中的bulb css

为了切换到 cyborg 主题，我将不得不在任何地方用 cyborg 替换 darkly ...

有更好的方法吗？像

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

  configureWebpack：（）=> {
    返回{
        插件：[
            新的webpack.DefinePlugin（{
                THEME_NAME：“机器人”
            }），
        ]，
    }
}

Answer 1

为了切换到“电子人”主题，我将不得不在所有地方用电子人黑暗地替换...

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

基本上，您创建一个文件，您在其中导入主题。我们称它为_my-bulma-theme.scss，现在就导入darkly。

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

在您的代码中，您将导入此文件，而不是直接从布尔玛导入：

// 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>？

1 个答案: