将 SASS/SCSS 变量导出到 Javascript，而不将它们导出到 CSS

Posted 2023-02-22

【中文标题】将 SASS/SCSS 变量导出到 Javascript，而不将它们导出到 CSS

【英文标题】：Export SASS/SCSS variables to Javascript without exporting them to CSS

【发布时间】：2019-12-23 11:06:11

【问题描述】：

背景

考虑以下_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 被导入模板时每次重复，并且可能可能会导致额外的冗余代码。在某些情况下，对于大型应用程序（许多组件和大型调色板），这实际上可以添加 000 行完全冗余的代码。

我的问题

有没有办法将 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 编译中排除！

【参考方案1】：

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

似乎唯一真正的解决方案是从_variables.scss 文件中提取export 语句并将其放入它自己的_export.scss 文件中，该文件随后将不包含在内在 SCSS 编译中。

这看起来像这样：

_variables.scss - 包含在 SCSS 编译中

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

_export.scss - 不包含在 SCSS 编译中

@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";）：

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

那么，_export.scss 在 JavaScript 中只是引用 only 就像这样（注意 core-styles 只是我在项目中使用的别名）：

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

【讨论】：

我在实现您在此处概述的内容时遇到了一些困难，您介意看看我的问题吗：***.com/questions/61517117/…

如果我使用 rollup 执行此操作，则样式为空字符串，例如“”。有任何使用 Rollup 的经验吗？

这对我不起作用，我一直在为 styles 变量返回一个空对象。将_export.scss 更新为_export.module.scss 后，我就可以取回变量

@Stetzon，您的评论是唯一对我有用的解决方案。我想知道你的 webpack.js 是什么样子的

@Stetzon 的解决方案也适用于 Parcel