背景

考虑以下_variables.scss文件：

/* Define all colours */
$white:    #fff;
$black:    #000;
$grey:     #ccc;
// etc...

// Export the color palette to make it accessible to JS
:export {
    white: $white;
    black: $black;
    grey: $grey;
    // etc...
}

上面代码的目的是通过导入使SCSS变量对JavaScript可用，如下所示：

import variables from 'variables.scss';

请参阅here的详细说明。
问题
现在考虑以下模板（我使用Vue.js模板作为示例，但这与许多框架相关）：

<!-- Template here... -->

<style lang="scss" scoped>

    // Import Partials
    @import "~core-styles/brand/_variables.scss";
    @import "~core-styles/brand/_mixins.scss";

    // Styles here...

</style>

• 在上面的示例中，我使用了scoped属性，因为这演示了即将出现的问题的最坏情况，但即使没有scoped，问题仍然相关。*

上面的SCSS将编译为如下代码：

[data-v-9a6487c0]:export {
    white: #fff;
    black: #000;
    grey: #ccc;
    // etc...
}

此外，使用scoped属性，这将在_variables.scss每次导入模板时重复**，并且 * 可能 * 潜在地导致额外的冗余代码。在某些情况下，对于大型应用程序（许多组件和大型调色板），这可能会增加数千行完全冗余的代码。

我的问题

有没有一种方法可以将SCSS变量导出到Javascript而不导出到CSS？

潜在（脏）解决方案

理想情况下，我试图避免使用一个名为_export.scss的单独文件的解决方案，其目的只是将所有SCSS变量导出到JS，但它被排除在所有CSS构建之外。
只是为了扩展上面的 dirty 解决方案，这是我目前所采用的方法（在我的情况下，在标准大小的网站上，到目前为止，它为我节省了大约600行冗余的CSS代码）：

_export.scss

/*
 |--------------------------------------------------------------------------
 | SASS Export
 |--------------------------------------------------------------------------
 |
 | Define any variables that should be exported to Javascript. This file
 | is excluded from the CSS builds in order to prevent the variables from
 | being exported to CSS.
 |
 */

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    white: #fff;
    black: #000;
    grey: #ccc;
    // etc...

}

然后，在我的Javascript中，我不是从_variables.scss导入，而是从_export.scss导入，如下所示：

import styles from 'core-styles/brand/_export.scss';

最后，export语句现在可以从_variables.scss文件中删除，从而防止编译CSS export代码。

注意：_export.scss文件必须排除在SCSS编译之外！