不懂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)
请教这个错误该怎么解决呢?
1 个回复
1***@qq.com
试试