gweii
gweii
  • 发布:2021-03-28 22:23
  • 更新:2021-04-12 14:49
  • 阅读:1271

尝试用scss做微信小程序的多主题/theme,主题文件编译报错

分类:uni-app

不懂scss,在网上找了一些资料,写了个主题文件代码如下:

$color-themes: (  
    light: (  
        page-background: #FFF  
    ),  
    dark: (  
        page-background: #000  
    ),  
    red: (  
        page-background: #C72F34  
    ),  
    blue: (  
        page-background: #00F  
    )  
);  

@mixin themify {  
    @each $theme-name, $theme in $color-themes {  
        .theme-#{$theme-name} & {  
            $theme-map: () !global;  
            // 循环合并键值对  
            @each $key, $value in $theme {  
                $theme-map: map-merge($theme-map, ($key: $value)) !global;  
            }  
            // 表示包含 下面函数 themed()  
            @content;  

            $theme-map: null !global;  
        }  
    }  
}  

//声明一个根据Key获取颜色的function  
@function colorThemed($key) {  
    @return map-get($theme-map, $key); // 这里报错:Undefined variable: "$theme-map".  
}  

//获取背景颜色  
@mixin backgroundColor($color) {  
    @include themify {  
        background-color: colorThemed($color)!important;  
    }  
}  

//获取颜色  
@mixin color($color) {  
    @include themify {  
        color: colorThemed($color)!important;  
    }  
}  

//获取边框颜色  
@mixin borderColor($color) {  
    @include themify {  
        border-color: colorThemed($color)!important;  
    }  
}

app.vue中使用了以上样式:

<style lang="scss">  
    @import './style/colorThemes.scss';  

    /* 以下样式用于 hello uni-app 演示所需 */  
    page {  
        background-image: linear-gradient(to bottom right, #FCD0C6, colorThemed("page-background")), url("./static/img_background-nocolor.png");  
        background-blend-mode: lighten;  
        background-size: cover;  
        height: 100%;  
        font-size: 28rpx;  
        line-height: 1.8;  
    }  
</style>

编译时报错如下:
SassError: Undefined variable: "$theme-map".
22:08:34.770 on line 34 of ../../../../../../Users/george/Documents/GitHub/yuanhe-nav-uniapp/style/_colorThemes.scss
22:08:34.776 >> @return map-get($theme-map, $key);
22:08:34.776 --------------------^
22:08:34.783 at runLoaders (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack/lib/NormalModule.js:316:20)
22:08:34.790 at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/loader-runner/lib/LoaderRunner.js:367:11
22:08:34.790 at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/loader-runner/lib/LoaderRunner.js:233:18
22:08:34.799 at context.callback (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
22:08:34.800 at Object.render [as callback] (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/sass-loader/dist/index.js:73:7)
22:08:34.806 at Object.done [as callback] (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/neo-async/async.js:8067:18)
22:08:34.814 at options.error (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/lib/index.js:294:32)

请教这个错误该怎么解决呢?

2021-03-28 22:23 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

试试

page {    
        @include themify {  
                background-image: linear-gradient(to bottom right, #FCD0C6, colorThemed("page-background")), url("./static/img_background-nocolor.png");    
        }  
        background-blend-mode: lighten;    
        background-size: cover;    
        height: 100%;    
        font-size: 28rpx;    
        line-height: 1.8;    

    } 

该问题目前已经被锁定, 无法添加新回复