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

Question

I have an admin template in which I would like user to provide option to switch between different theme color such as dark/light theme along with setting variable values, but I'm unable to conditionally import style files.

@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;
}

Getting error: Import directives may not be used within control directives or mixins.

Answer 1

Also it is a very long wished item to sass... as the error message returns: that is not possible. ( https://github.com/sass/sass/issues/279 )

But what you can do is setting a theme variable and import your theme files. Every theme file has an conditional output based on the theme variable:

$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 
   */

}