SCSS 变量未全局应用

SCSS Variable not applying globally

提问人:HenrijsS 提问时间:8/31/2021 更新时间:8/31/2021 访问量:1443

问:

我有一个变量和画廊部分: ,_variables.scss_gallery.scss

当我导入仅包含一行的变量文件时,它在主文件中起作用,但在文件中不起作用。$primary: #e0291a;style.scss_gallery.scss

我的项目只会增长,但我真的需要在每个后续部分文件中导入变量文件吗?

我正在使用 VSCode Live Sass 编译器。这些变量适用于我几年前设置的自定义 webpack/laravel 混合脚本,但不适用于此扩展。

有没有办法在不在每个 scss 文件中添加行的情况下简化变量导入?

style.scss(主文件):

@use 'variables';
@use 'gallery';

_variables.scss:

$primary: #ffffff;

_gallery.scss:

#gallery {
    background-color: $primary // <--- Throws error of undefined variable
}
css live-sass-编译器

评论

0赞 Felipe Chernicharo 8/31/2021
您是否考虑过使用CSS变量?
1赞 Tanner Dolby 8/31/2021
您只需要将(如果您想访问没有命名空间的变量,就像上面所做的那样)添加到顶部,因为它无法访问 中加载的成员。所以简而言之,是的,您需要提供来自 的加载成员的部分知识。@use "path-to/variables" as *;_gallery.scss_variables_gallery.scss_variables.scss
0赞 Art 8/31/2021
这回答了你的问题吗?SASS - 跨多个文件使用变量
1赞 Tanner Dolby 8/31/2021
@ArtiomB@import规则正在逐渐被淘汰,因此最好还是提出解决方案。@use

答:

0赞 keyboard-warrior 11/26/2023 #1

确保在使用 Nuxt 2 时,您使用的是 Nuxt 样式资源 V1 - 很多说明都没有这么说