动态导入样式和设置scss变量值

Question

我有一个管理模板，我希望用户在其中提供选项来切换不同的主题颜色，例如深色/浅色主题以及设置变量值，但我无法有条件地导入样式文件。

@if $light-theme {
    @import "./_metronic/_assets/sass/themes/layout/aside/light.scss";
    $primary: green;
} @else {
    @import "./_metronic/_assets/sass/themes/layout/aside/dark.scss";
    $primary: blue;
}

出现错误：不能在控制指令或 mixins 中使用导入指令。

Answer 1

这也是一个非常渴望的项目......因为错误消息返回：这是不可能的。 (https://github.com/sass/sass/issues/279)

但是你可以做的是设置一个主题变量并导入你的主题文件。每个主题文件都有一个基于主题变量的条件输出：

$theme: 'light-theme';
@import 'path/dark-theme';
@import 'path/light-theme';


// EVEREY THEME FILE WITH STRUCTURE:
@if( $theme == 'this-theme' ){

   /* 
      here goes your theme variables or 
      if whanted your theme code in the file 
   */

}