less 引用本地图片

[a1ooha]

问题描述
less 引用本地图片

复现步骤

.img {
    background-image: url('~@img/a.png')
}

加不加 ~ 都无效，请问怎么引用本地图片？

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[a1ooha]

在小程序的样式中，默认不能直接引用本地资源，只能通过网络地址、Base64 的方式来进行资源引用，为了方便开发，Taro 提供了直接在样式文件中引用本地资源的方式，其原理是通过 PostCSS 的 postcss-url 插件将样式中本地资源引用转换成 Base64 格式，从而能正常加载。

文档里看到可以，但要怎么在 less 里引入呢？配置了 alias 无效，只能用相对路径吗？ @luckyadam

[a1ooha]

  const cssUrlConf = Object.assign({ limit: 10240 }, customUrlConf)
  const maxSize = Math.round((customUrlConf.config.limit || cssUrlConf.limit) / 1024)
  const postcssPxtransformConf = Object.assign({}, postcssPxtransformOption, customPxtransformConf, customPxtransformConf.config)
  const processors = []
  if (customAutoprefixerConf.enable) {
    processors.push(autoprefixer(customAutoprefixerConf.config))
  }
  if (customPxtransformConf.enable) {
    processors.push(pxtransform(postcssPxtransformConf))
  }
  if (cssUrlConf.enable) {
    processors.push(cssUrlParse({
      url: 'inline',
      maxSize,
      encodeType: 'base64'
    }))
  }

我看到 taro-cli 里只放出了 postcss-url 中的 maxSize 配置，我在本地改了一下传入了 basePath，就不需要写图片的相对路径了。主要是用相对路径不同层级的文件引同一份 less 会导致图片找不到。可否能放出 basePath 这个配置项？或者还有什么其他的解决方法？ @luckyadam

[taro-bot]

CC @luckyadam

[zjjjjjjjjjjd]

大佬咋解决的？2023年了，还是不行