Экспортируйте переменные SASS/SCSS в Javascript, не экспортируя их в CSS. ⇐ CSS

[Anonymous]

Фон
Рассмотрим следующий файл _variables.scss:

/* Определить все цвета */ $белый: #fff; $черный: #000; $серый: #ccc; // и т. д... // Экспортируем цветовую палитру, чтобы сделать ее доступной для JS :экспорт { белый: $белый; черный: $черный; серый: $серый; // и т. д... } Цель приведенного выше кода — сделать переменные SCSS доступными для Javascript посредством импорта следующим образом:

импортировать переменные из 'variables.scss'; Более подробное описание смотрите здесь.
Проблема
Теперь рассмотрим следующий шаблон (в качестве примера я использовал шаблон Vue.js, но он применим ко многим фреймворкам):

// Импорт частей @import "~core-styles/brand/_variables.scss"; @import "~core-styles/brand/_mixins.scss"; // Стили здесь... В приведенном выше примере я использовал атрибут scoped, поскольку он демонстрирует наихудший сценарий предстоящей проблемы, но даже без scoped проблема все равно остается. актуально.

Приведенный выше SCSS скомпилируется во что-то вроде:

[data-v-9a6487c0]:export { белый: #fff; черный: #000; серый: #ccc; // и т. д... } Кроме того, с атрибутом scoped это будет повторяться каждый раз, когда _variables.scss импортируется в шаблон, и может потенциально привести к созданию дополнительного избыточного кода. В некоторых случаях для больших приложений (много компонентов и большая цветовая палитра) это может буквально добавить тысячи строк полностью избыточного кода.
Мой вопрос
Есть ли способ экспортировать переменные SCSS в Javascript без экспорта их в CSS?
Потенциальное (грязное) решение
В идеале я стараюсь избегать создания отдельного файла с именем, например, _export.scss, цель которого — просто экспортировать все переменные SCSS в JS, но он исключен из всех CSS-сборки...

Просто чтобы расширить приведенное выше грязное решение, это то, к чему я сейчас прибегаю (в моем случае на веб-сайте стандартного размера это сэкономило мне около 600 строк избыточного CSS). код):

_export.scss

/* |----------------------------------------------------------------- ------------------------- | Экспорт SASS |----------------------------------------------------------------- ------------------------- | | Определите все переменные, которые следует экспортировать в Javascript. Этот файл | исключен из сборок CSS, чтобы предотвратить | экспортируется в CSS. | */ @import "переменные"; :экспорт { // Экспортируем цветовую палитру, чтобы сделать ее доступной для JS белый: #fff; черный: #000; серый: #ccc; // и т. д... } Затем в моем Javascript вместо импорта из _variables.scss я импортирую из _export.scss следующим образом:

импортировать стили из «core-styles/brand/_export.scss»; И, наконец, оператор export теперь можно удалить из файла _variables.scss, тем самым предотвращая скомпилированный CSS-код export.

Примечание. Файл _export.scss необходимо исключить из компиляции SCSS!