Могу ли я динамически создавать выходные данные, используя веб-пакет, используя ту же точку входа, но используя другой ключ для определения выходных данных? - PullRequest
Новая
       58

Могу ли я динамически создавать выходные данные, используя веб-пакет, используя ту же точку входа, но используя другой ключ для определения выходных данных?

0 голосов
/ 29 апреля 2020

У меня есть несколько тем в моем проекте с использованием Sass. Для простоты скажем, у меня есть 5 тем:

  • синий
  • зеленый
  • оранжевый
  • красный
  • желтый

Выход каждого будет определяться следующим образом: 

$key: key;

.theme {
  background-color: $key;
}

$key, уникальным для каждой темы. Например, если $key было blue, результат был бы следующим: 

.theme {
  background-color: blue;
}

Как я упоминал ранее, я использую Sass для CSS, поэтому, чтобы сохранить вещи DRY, я абстрагировал класс определение в свой собственный файл, поэтому все мои index.scss файлы выглядят следующим образом: 

$key: blue;
@import 'object/theme';

С учетом вышеизложенного, теперь у меня есть 5 разных файлов ввода для каждой темы: 

entry: {
  blue: './src/themes/blue.scss',
  green: './src/themes/green.scss',
  ...
}

Все вышеперечисленное работает нормально, но на самом деле у меня есть 20 тем, и мне может потребоваться добавить или удалить их со временем.

Теперь, что я пытаюсь сделать, это иметь все записи oop, поэтому мне не нужно вручную добавлять темы, когда это необходимо, и у меня нет длинного списка записей в моей конфигурации веб-пакета. В идеале я предпочел бы передать ключ к записи и произвести вывод таким образом. Так что-то вроде: 

const theme = ['blue', 'green', 'orange', 'red', 'yellow'];
enter code here
entry: {
  themes.forEach(theme () => theme: {'./src/themes/theme.scss', theme }),
  otherEntry: '../..'
}

Итак, мой вопрос, может ли веб-пакет сделать это? Я смотрел на использование glob, где я могу искать все файлы, но, кажется, просто связать их все вместе?

Надеюсь, мой пример имеет смысл.

...