import css 无法解析相对路径

问题描述

import css 时无法正确解析其中字体文件路径

复现步骤

在 App.vue 中导入 css，出现错误

App.vue

@import url('@/static/font-icon/iconfont.css');

error

Module not found: Error: Can't resolve './iconfont.ttf

iconfont.css

系统信息:

发行平台: [微信小程序]
HBuilderX版本 [使用命令行编译]
uni-app版本 [如使用Vue-cli创建/运行项目，则提供npm run info的运行结果]

uni-app v3.1.22
uni-app cli v2.0.0-31920210709003

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.22000.1.0
  npmPackages:
    @dcloudio/types: * => 2.3.6 
    @dcloudio/uni-app-plus: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-app-plus-nvue:  0.0.1 
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1 
    @dcloudio/uni-automator: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-cli-shared: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-h5: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-helper-json: * => 1.0.13 
    @dcloudio/uni-i18n: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-migration: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-360: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-alipay: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-baidu: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-kuaishou: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-qq: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-toutiao: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-vue: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-mp-weixin: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-quickapp-native: ^2.0.0-31920210709003 => 2.0.0-31920210709003 
    @dcloudio/uni-quickapp-webview: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/uni-stat: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/uni-template-compiler: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/vue-cli-plugin-uni: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/webpack-uni-mp-loader: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @dcloudio/webpack-uni-nvue-loader:  0.0.1
    @dcloudio/webpack-uni-pages-loader: ^2.0.0-31920210709003 => 2.0.0-31920210709003
    @hap-toolkit/dsl-vue:  0.6.13
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/component-compiler-utils:  3.2.2 (3.2.2)
    @vue/preload-webpack-plugin:  1.1.2
    @vue/shared: ^3.0.0 => 3.1.5
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.1.0 => 7.15.0
    mpvue-page-factory:  1.0.1
    mpvue-template-compiler:  1.0.13
    uni-h5-vue:  2.6.10
    uni-mp-vue:  2.6.10
    vue: ^2.6.11 => 2.6.14
    vue-eslint-parser:  7.10.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.6 (16.3.3, 15.9.6)
    vue-router:  3.0.1
    vue-style-loader:  4.1.3 (4.1.3)
    vue-template-compiler: ^2.6.11 => 2.6.14 (2.6.14)
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.2.0 => 3.6.2
    vuex-persistedstate: ^3.1.0 => 3.2.1
  npmGlobalPackages:
    @vue/cli: Not Found

补充信息

应该是没解析 css 中的相对路径，可参考隔壁 taro 的解决方案： https://github.com/NervJS/taro/commit/d4e2b469faa775a28395a6b30c51649c79858e56

dcloudio / uni-app

import css 无法解析相对路径 #2806