scss中别名引用背景图报错

[smile-alive]

相关平台

微信小程序

复现仓库

https://github.com/smile-alive/sylas.git
小程序基础库: 2.30.3
使用框架: React

复现步骤

• 写了个自定义loader处理静态图片，loader返回cdn地址module.exports = '${data.url}';
• jsx中import别名引用正常显示import src from '@/static/image/放大镜.png';
• jsx中行内样式正常
• css相对路径编译后正常
• webpack4没有此问题
• css中～别名引用报错background-image: url('~@/static/image/放大镜.png');编译后路径错误background-image: url(/86c2e152ed4d974fe191.png-do-not-use-local-path-./pages/home/index.wxss&32&20);

import React from 'react';
import { setClipboardData } from '@tarojs/taro';
import { View, Image, Button } from '@tarojs/components';
import src from '@/static/image/放大镜.png';
import './index.scss';

const Home: React.FC = () => {
	console.log('🚀 ~ file: index.tsx:4 ~ src:', src);

	return (
		<View className='home-page' style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
			<View className='cover' style={{ width: '200px', height: '200px' }}>
				css背景图片
			</View>
			<Image mode='aspectFit' src={src} style={{ width: '200px', height: '200px', border: 'solid 1px #ccc' }} />
			<View
				style={{
					width: '100%',
					padding: '4px 8px',
					lineHeight: '24px',
					backgroundColor: '#ccc',
					margin: '10px 0',
					wordWrap: 'break-word'
				}}
			>
				{src}
			</View>
			<Button onClick={() => setClipboardData({ data: src })}>copy</Button>
		</View>
	);
};

.home-page {
	width: 100vw;
	height: 100vh;

	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
		font-weight: normal;
		border: solid 1px rgb(244, 128, 128);
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('~@/static/image/放大镜.png');
		font-style: 12px;
	}
}

报错信息

[渲染层网络层错误] pages/home/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96
  30 |   background-repeat: no-repeat;
  31 |   background-size: cover;
> 32 |   background-image: url(/86c2e152ed4d974fe191.png);
     |                    ^
  33 |   font-style: 12rpx;
  34 | }
  35 | (env: macOS,mp,1.06.2210310; lib: 2.30.3)

编译后样式

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20rpx;
    font-weight: normal;
    border: solid 1rpx rgb(244, 128, 128);
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/86c2e15….png-do-not-use-local-path-./pages/home/index.wxss&32&20);
    font-style: 12rpx;
}

期望结果

正常回显

实际结果

报错，路径没有替换

环境信息

👽 Taro v3.5.11


  Taro CLI 3.5.11 environment info:
    System:
      OS: macOS 13.2.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.18.1 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.19.2 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.2 => 3.6.2 
      @tarojs/components: 3.6.2 => 3.6.2 
      @tarojs/helper: 3.6.2 => 3.6.2 
      @tarojs/plugin-framework-react: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-weapp: 3.6.2 => 3.6.2 
      @tarojs/react: 3.6.2 => 3.6.2 
      @tarojs/router: 3.6.2 => 3.6.2 
      @tarojs/runtime: 3.6.2 => 3.6.2 
      @tarojs/shared: 3.6.2 => 3.6.2 
      @tarojs/taro: 3.6.2 => 3.6.2 
      @tarojs/webpack5-runner: 3.6.2 => 3.6.2 
      babel-preset-taro: 3.6.2 => 3.6.2 
      eslint-config-taro: 3.6.2 => 3.6.2 
      react: ^18.0.0 => 18.2.0 
    npmGlobalPackages:
      typescript: 4.9.3

[smile-alive]

这个issue一个多月了，还没人跟进吗？

[H-Sunspot]

尝试了，样式文件里url引入的图片会被打到产出里， 如何能使其不让内置的loader影响呢？ 关于webpack5下postcss\imageUrlloader配置的用法能否再细些呢。

[H-Sunspot]

有修改webpack5 asset 默认配置的方式吗？

[smile-alive]

有修改webpack5 asset默认配置的方式吗？

我在webpackChain执行了此操作 => chain.module.rules.delete('image');

如果不清除，我的自定义loader：rocket-cdn返回的callback(null, module.exports = '${data.url}';)将无法替换本地资源的引用

[smile-alive]

试过了，样式文件里url引入的图片会被打到输出里，如何才能使其不让内部的loader影响呢？ 关于webpack5下postcss\imageUrlloader配置的使用方法不能再细节呢。

https://github.com/smile-alive/rocket-cdn
这是我的loader地址
如果没有oss，可以暂时把返回的值固定为一个cdn图片链接