- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
考虑以下 _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 编译中排除!
最佳答案
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 编译中。
这看起来像这样:
_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';
关于javascript - 将 SASS/SCSS 变量导出到 Javascript,而不将它们导出到 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57536228/
我试图按部分组织我的 .css 文件,我需要从任何文件访问文件组中的任何类。在 Less 中,我可以毫无问题地创建一个包含所有文件导入的主文件,并且每个文件都导入主文件,但在 Sass 中,我收到一个
我有一个全局 main.scss 文件,我在其中声明了一个 .small-size-text{ font-size: 12px; } 并且在作为login.scss 的子组件文件中,我将另一个类定
这是一个我完全不明白的奇怪错误。我通常会先搜索并寻求答案,然后再将其发布到 StackOverflow 上。所以问题是我想使用从另一个名为 的 scss 文件中导入的变量。 _variables.co
我试图让 livereload 与 rails 3.2 一起工作,我遇到了这个问题,其中有一个引用,不使用 .css.scss 命名导入的 sass 部分: Rails: Use livereload
这是我当前在 gulpfile.js 中的代码部分: // Sass gulp.task('sass', function () { gulp.src(['./node_modules/boots
我有这样一个样式文件的项目结构: client/ config-style.scss ------components/ ------style.scss -----------------my_co
如何在另一个.scss文件中包括.scss文件? 我试图将其写入文件中: app.scss: @include('buttons'); @include('dropzone'); body {
当我向 body 添加“dark-theme”类时,我想添加一个不同的主题。我的实现是这样的: @import '../../../../node_modules/angular-grids/styl
我在一个 Angular 元素中有一个 SCSS,它从 node_modules 导入另一个 SCSS: @import "node_modules/grapesjs/src/styles/scss/
它会缓存一个文件还是会导入两次并加倍我的代码? 假设我有variable.scss 并且必须将它导入那两个apple.scss | orange.scss。这样可以吗? 最佳答案 根据需要多次导入 v
这是 style.scss - 文件 @import '~bootstrap/scss/_functions.scss'; @import '~bootstrap/scss/_variables.sc
我在我的应用程序上使用 Angular (Jhipster),我想在我的 glocal.scss 文件中导入几个 .scss 文件。所以我创建了一个“util”文件夹(与 global.scss 文件
我正在 MPR 中从 Vaadin 8 迁移到 Vaadin 14 LTS。我们项目中使用的 .scss 文件需要编译。我使用了以下插件 com.vaadin vaa
这是我当前的项目目录结构,因为我想不出更好的组织方式来组织每个组件都有自己的 .scss 文件的用例,但是,整个应用程序都是包含全局 variables.scss 文件的 Fed 主题。目前,我正在每
在我的reactJS应用程序中 - 我将所有.scss文件包含在一个main.scss文件中 - 在src文件夹中的styles文件夹下。我有以下 webpack 配置。尝试将 main.scss 文
在最近的 Angular 7 项目中,我有一个组件(在文件 file-list.component.ts 中定义),其中有一个 mat-paginator (来自 Angular Material 组
我有一个引用了一些 Compass mixins 的 SCSS 文件。现在我想将它包含在一个不使用 Compass 的元素中。为此,我想将带有 Compass 混入的 SCSS 转换为没有 Compa
我只是在处理这个 tutorial 之后的本地元素它告诉我更改三个 css 文件: fluid_skeleton.css => _fluid_skeleton.scss 规范化.css => _规范化
我在根文件夹中创建了一个全局 scss 变量文件 对于导入变量我写 @import '../../../style_config/style_config'(全局变量文件) 到每个 scss 文件 更
我正在尝试将多个 SCSS 文件处理成 Webpack (3.6.0) 中的单个外部 CSS 文件,但我在解析 @import 语句时遇到问题。 条目 index.js 包含: import './s
我是一名优秀的程序员,十分优秀!