将SASS/SCSS变量导出到Javascript，而无需将它们导出到CSS中。

7 浏览
0 Comments

将SASS/SCSS变量导出到Javascript，而无需将它们导出到CSS中。

背景

考虑以下的_variables.scss文件：

/* 定义所有的颜色 */
$white:    #fff;
$black:    #000;
$grey:     #ccc;
// 等等...
// 将颜色调色板导出，以便在JS中使用
:export {
    white: $white;
    black: $black;
    grey: $grey;
    // 等等...
}

以上代码的目的是通过导入来使SCSS变量在Javascript中可用，如下所示：

import variables from 'variables.scss';

详细描述请参见此处。

问题

现在考虑以下模板（我以Vue.js模板作为示例，但这适用于许多框架）：

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

以上SCSS将编译为类似以下的内容：

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

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

我的问题

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

潜在（肮脏）的解决方案

我理想情况下希望避免使用一个名为_export.scss的单独文件的解决方案，其中的目的仅仅是将所有SCSS变量导出到JS，但它不会包含在所有CSS构建中...

为了进一步解释上述肮脏的解决方案，这是我目前使用的（在我的情况下，对于一个标准大小的网站，它目前已经为我节省了大约600行冗余的CSS代码）：

_export.scss

/*
 |--------------------------------------------------------------------------
 | SASS导出
 |--------------------------------------------------------------------------
 |
 | 定义应该导出到Javascript的任何变量。这个文件在CSS构建中被排除在外，以防止变量被导出到CSS。
 |
 */
@import "variables";
:export {
    // 导出颜色调色板，以便在JS中使用
    white: #fff;
    black: #000;
    grey: #ccc;
    // 等等...
}

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

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

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

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

0