Question

背景

考虑以下_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变量导出到Java语言而无需将其导出到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编译中排除！

Answer 1

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

似乎唯一真正的解决方案是从export文件中提取_variables.scss语句并将其放入自己的_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中仅仅引用（请注意，core-styles只是我在项目中使用的别名）：

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

将SASS / SCSS变量导出到Javascript，而无需将其导出到CSS

背景

问题

我的问题

潜在（肮脏）解决方案

1 个答案: