scss中自定义函数

LW放下
2023-03-02 10:39:42
Web前端
css uniapp

最近在写uniapp中遇到background设置相对路径在小程序环境加载不了的情况，于是想着换一种方式，如下:

1. 使用动态style 通过模板中加载图片资源, 这个也是比较常见的

<div style="background-image: url('assets/images/xxx.png')"></div>

# 通过函数获取全地址
<div :style="{backgroundImage: 'url('+getImgUrl('assets/images/xxx.png')+')'}"></div>

2. 通过自定义scss函数获取全地址

vite.config.ts 文件

export default defineConfig(({mode})=>{
    const env = loadEnv(mode, process.cwd())
    return {
      ......
      css: {
        preprocessorOptions: {
          scss: {
            // 这里通过环境变量定义scss全局变量$staticDomain
            additionalData: '$staticDomain: "' + env.VITE_APP_mini_static + '";@import "./src/common/scss/all.scss";',
            javascriptEnabled: true
          }
        },
      },
      ......
    }
});

src/common/scss/all.scss // 这个文件根据自己习惯创建，文件名称同上面的 additionalData 中引入的文件

@function buildStaticUrl($fileName){
  @return url($staticDomain + $fileName)
}

最后就可以愉快的使用了

<template lang="pug">
view.back
</template>

<script setup lang="ts">
 // todo
</script>

<style scoped lang="scss">
 //todo 
 .back {
    background: buildStaticUrl('icon/udlr/bold-right.png') no-repeat  right 6rpx;
 }
</style>

本文为放下原创文章,转载无需和我联系,但请注明来自LW放下http://www.putyy.com