背景
考虑以下_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
每次导入模板时重复**,并且 * 可能 * 潜在地导致额外的冗余代码。在某些情况下,对于大型应用程序(许多组件和大型调色板),这可能会增加数千行完全冗余的代码。
我的问题
有没有一种方法可以将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编译之外!
3条答案
按热度按时间huwehgph1#
**注意:**我发布这个答案是因为似乎没有更好的解决方案,但是,如果有人随后提供更好的解决方案,我将非常乐意接受它。
似乎唯一真实的的解决方案是将
export
语句从_variables.scss
文件中提取出来,并将其放入自己的_export.scss
文件中,该文件随后将不包含在SCSS兼容中。这将看起来像这样:
_variables.scss-包含在SCSS编译中
_export.scss-不包含在SCSS编译中
然后你的
app.scss
(我使用brand.scss
)文件看起来像这样(注意没有@include "export";
):然后,
_export.scss
在JavaScript中被简单地引用only,如下所示(注意,core-styles
只是我在项目中使用的别名):jogvjijk2#
我想知道这是否是由于使用
@import
而不是@use
造成的。@import
之所以被弃用,正是因为它是复制-粘贴,所以多次导入会导致相同内容的多个副本。e0bqpujr3#
来自chatgpt:
color-varibales.ts/js
你就用它:
import Colors from "./color-varibales.ts"