将 SASS/SCSS 变量导出到 Javascript 而不将它们导出到 CSS [英] Export SASS/SCSS variables to Javascript without exporting them to CSS

问题描述

考虑以下 _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可用:

The purpose of the above code is to make the SCSS variables available to Javascript by means of importing like so:

import variables from 'variables.scss';

在此处查看更详细的说明.

现在考虑以下模板(我以 Vue.js 模板为例，但这与许多框架相关):

Now consider the following template (I have used as Vue.js template as an example but this is relevant to numerous frameworks):

<!-- 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，问题仍然存在相关.

In the above example I have used the scoped attribute as this demonstrates the worst case scenario for the upcoming problem, but even without scoped the problem is still relevant.

上面的 SCSS 将编译成以下内容:

The above SCSS will compile to something along the lines of:

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

此外，使用 scoped 属性，这将每次重复 _variables.scss 导入模板，并且 可能会导致额外的冗余代码.在某些情况下，对于大型应用程序(许多组件和大型调色板)，这实际上会添加 000 行完全冗余的代码.

In addition, with the scoped attribute, this will repeat every time _variables.scss is imported into a template, and can potentially result in additional redundant code. In some cases, for large applications (many components and a large colour palette), this can literally add 000's of lines of completely redundant code.

有没有办法将 SCSS 变量导出到 Javascript 而不将它们导出到 CSS?

Is there a way to export the SCSS variables to Javascript without exporting them to CSS?

理想情况下，我试图避免使用名为 _export.scss 的单独文件的解决方案，其目的只是将所有 SCSS 变量导出到 JS，但它被排除在所有CSS 构建...

I am ideally trying to avoid a solution of having a separate file named, for example, _export.scss where it's purpose is simply to export all SCSS variables to JS, but it is excluded from all CSS builds...

只是为了扩展上面的脏解决方案，这就是我目前正在使用的(就我而言，在一个标准大小的网站上，它到目前为止为我节省了大约 600 行冗余 CSS代码):

Just to expand on the above dirty solution, this is what I am currently resorting to (in my case, on a standard size website, it has so far saved me ~600 lines of redundant CSS code):

_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 导入，如下所示:

Then, in my Javascript instead of importing from _variables.scss, I import from _export.scss like so:

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

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

And finally, the export statement, can now be removed from the _variables.scss file, thus preventing the compiled CSS export code.

注意:_export.scss 文件必须从 SCSS 编译中排除！

Note: The _export.scss file must be excluded from the SCSS compilation!

推荐答案

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

Note: I have posted this answer because it seems there is no better solution, however, if someone subsequently provides a better solution, I will be more than happy to accept it.

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

It seems that the only real solution to this is to extract the export statement out of the _variables.scss file and place it into it's own _export.scss file which will subsequently not be included in the SCSS compliation.

这看起来像这样:

_variables.scss - 包含在 SCSS 编译中

_variables.scss - included in the SCSS compilation

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

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

_export.scss - not included in the SCSS compilation

@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";):

And then your app.scss (I use brand.scss) file will look something like this (note the absence of @include "export";):

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

然后，_export.scss 在 JavaScript 中只是引用 only 就像这样(注意 core-styles 只是我使用的别名在我的项目中):

Then, _export.scss is simply reference only in JavaScript like so (note that core-styles is just an alias that I used in my projects):

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

这篇关于将 SASS/SCSS 变量导出到 Javascript 而不将它们导出到 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！