Question

我正在使用以下三个文件将SCSS文件编译为CSS：

bootstrap / _variables.scss：

$font-color-root: #ff6d00;
$font-color-dark: #000;

themes / _theme.scss：

:root {
    --font-color: #{$font-color-root};
}
 
/* dark theme variables */
[data-theme=\'dark\'] { 
    --font-color: #{$font-colour-dark};
}

style.scss：

//import variables
@use 'bootstrap/variables' as *;

//import CSS files
@use 'themes/theme';

这总是引发此错误，显然在theme.scss文件中变量不可见，如何使它们可见？

我认为全局名称空间将是解决此问题的方法。

Error: Undefined variable.
  ╷
2 │     --font-color: #{$font-color-root};
`

Answer 1

我已经确定了解决方案：

引导程序/主文件：

$theme: "default";

//Import CSS file, pass the set $theme using `with ()`
@use 'themes/base_theme' with ($theme: $theme);

_base_theme.scss：

//theme will default to the value set here unless overwritten in the calling file using the `with` language construct
$theme: "default" !default;    

//gets vars with theme specified
@use '../bootstrap/variables' as vars with ($theme: $theme);

:root {
    --font-color: #{$font-color-root};
}

/* dark theme variables */
[data-theme=\'dark\'] { 
    --font-color: #{$font-colour-dark};
}

_variables.scss：

//Set Initial SCSS Variables
$theme: "default" !default;


$font-color-root: #000;
$font-color-dark: #fff;

//if theme is set to "not_default", change values
@if $theme == "not_default" {
    $font-color-root: #fff;
    $font-color-dark: #000;
}

总结：默认文件调用一个主题文件，在主题文件中，使用@use语言构造导入所需的变量。 @use可以与with ()结合使用以覆盖默认变量设置（在这种情况下，$theme可以被覆盖）。

SASS / SCSS：@use定义到全局名称空间的变量抛出“未定义变量”错误

1 个答案: