Vuejs .vue файл: динамический меньше импорта - PullRequest
Новая
       9

Vuejs .vue файл: динамический меньше импорта

1 голос
/ 13 марта 2019

У меня есть приложение Vue, состоящее из нескольких стандартных .vue файлов, таких как: 

<template>
    <h1>My App</h1>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                cssTheme: 'default-theme'
            };
        }
    }
</script>

<style lang="less">
    @import "assets/constants";

    html, body {
        color: @color-ui-text;
    }
</style>

В моем файле assets/constants.less я определил много переменных CSS, которые будут использоваться less (цвета, шрифты и т. д.).

Я хочу дать моему приложению серию графических «тем», которые можно динамически изменять.

Учитывая переменную cssTheme, которую я могучитать / устанавливать / изменять из интерфейса (и устанавливать для него строки типа "green-theme", "vintage-theme", "default-theme"), как я могу импортировать и применять на лету соответствующие меньше файл в <style> часть .vue файла?Например, пользователь выбирает «зеленую тему», и я хочу переключить импортированный файл по умолчанию @import "assets/constants"; на @import "assets/constants-green";, где, например, @color-ui-text; установлен на темно-зеленый вместо стандартного черного.

1 Ответ

0 голосов
/ 13 марта 2019

Если вы используете vue cli, вы можете использовать что-то вроде этого: 

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "assets/constants";
        `
      }
    }
  }
};

Это автоматически добавит @import "assets/constants"; в каждый файл sass

Примечание: я использую sass в примере

подробнее об этом вы можете найти здесь: loaderoptions

...