less中使用绝对路径

背景

使用react-scripts和customize-cra覆盖create-react-app部分配置，配置绝对路径

配置

paths.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "@assets/*": [
                "scr/assets/*"
            ],
           ...
        }
    }
}

config-overrides.js

module.exports = override(
    // 默认路径设置
    addWebpackAlias({
        "@": path.resolve(__dirname, "./src"),
        "@assets": path.resolve(__dirname, "./src/assets/*"),
        ...
    })
)

tsx导入

import icon from "@assets/img/*.png";

less中使用

background-image: url("~@/assets/img/*.png");