Как ввести Глобальную константу в компонент vue <style>?

Question

Я ищу, как внедрить глобальный (THEME_NAME в моем примере) для всех компонентов vue:

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

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

Контекст:

Я использую darkly тему из bulma css в моем приложении vue (vue Cli 3)

<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

Чтобы переключиться на тему киборга, мне придется повсеместно заменить на киборга ...

Нет, если вы используете шаблон реэкспорт . Нет необходимости в каких-либо внешних библиотеках и магических кодах с веб-пакетом.

По сути, вы создаете файл, в который импортируете свою тему. Давайте назовем это _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";