将SASS/SCSS变量导出到Javascript，而不将其导出到CSS 背景

考虑以下

\u 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...
}

上述代码的目的是通过如下方式导入，使Javascript可以使用SCSS变量：

import variables from 'variables.scss';

请参阅更详细的说明

问题

现在考虑下面的模板（作为Vue.js模板作为例子，但这与许多框架相关）：

此外，使用

scoped

属性，这将每隔时间

\u变量重复一次。SCS

被导入到模板中，并可能导致额外的冗余代码。在某些情况下，对于大型应用程序（许多组件和大型调色板），这实际上可以添加000行完全冗余的代码

我的问题 有没有一种方法可以将SCSS变量导出到Javascript，而不将它们导出到CSS

潜在（脏）溶液 理想情况下，我试图避免使用一个名为

\u export.scss

的单独文件的解决方案，该文件的目的只是将所有scss变量导出到JS，但它被排除在所有CSS构建之外

仅对上述肮脏的解决方案进行扩展，这就是我目前采用的解决方案（在我的情况下，在一个标准大小的网站上，它迄今为止为我节省了约600行冗余CSS代码）：

\u 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中，不是从

\u variables.scss

导入，而是从

\u export.scss

导入，如下所示：

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

最后，现在可以从

\u variables.scss

文件中删除

export

语句，从而防止编译的CSS

export

代码

注意：必须将

\u export.scss

文件从scss编译中排除

注意：我发布了这个答案，因为似乎没有更好的解决方案，但是，如果有人随后提供了更好的解决方案，我将非常乐意接受

似乎唯一真正的解决方案是从

\u variables.scss

文件中提取

export

语句，并将其放入自己的

\u export.scss

文件中，该文件随后将不包含在scss compliation中

这将看起来像这样：

\u variables.scss-包含在scss编译中

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

@import "variables";

:export {

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

}

\u export.scss-未包含在scss汇编中

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

@import "variables";

:export {

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

}

然后您的

app.scss

（我使用的是

brand.scss

）文件将如下所示（注意没有

@include“export”；

）：

然后，

\u export.scss

只是像这样在JavaScript中引用而已（请注意，

核心样式

只是我在项目中使用的别名）：

---

我在实现您在这里概述的内容时遇到了一些困难，您介意看看我在这里提出的问题吗：如果我使用rollup执行此操作，则样式是一个空字符串，例如“”。有没有使用Rollup的经验？这对我来说不起作用，我一直在为

style

变量返回一个空对象。在将

\u export.scss

更新为

\u export.module.scss

之后，我就能够返回变量了

@import "variables";
@import "mixins";
@import "core";
@import "animations";
// etc...

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