将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可用:
import variables from 'variables.scss';
在此处.
问题
现在考虑以下模板(我以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';
最后，现在可以从_variables.scss文件中删除export语句，从而防止编译CSS CSS export代码.
注意:_export.scss文件必须从SCSS编译中排除！
注意:我之所以发布此答案，是因为似乎没有更好的解决方案，但是，如果有人随后提供了更好的解决方案，我将非常高兴接受它.
似乎唯一真正的解决方案是从_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中仅引用 (请注意，core-styles只是我在项目中使用的别名):
import styles from 'core-styles/brand/_export.scss';
Background
Consider the following _variables.scss file:
/* 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...
}
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';
See a more detailed description here.
The Problem
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>
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.
The above SCSS will compile to something along the lines of:
[data-v-9a6487c0]:export {
white: #fff;
black: #000;
grey: #ccc;
// etc...
}
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.
My Question
Is there a way to export the SCSS variables to Javascript without exporting them to CSS?
Potential (dirty) Solution
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...
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...
}
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';
And finally, the export statement, can now be removed from the _variables.scss file, thus preventing the compiled CSS export code.
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.
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.
This will look something like this:
_variables.scss - included in the SCSS compilation
/* Define all colours */
$white: #fff;
$black: #000;
$grey: #ccc;
// etc...
_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...
}
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...
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屋！
