微信小程序打包不包含iconfont文件

[cleverTom]

问题描述
[问题描述：升级到1.3.13版本,昨天版本iconfont.css和iconfon.eot文件在同级目录下,外层static包还能包含字体文件,今天升级后,又缺失了iconfont相关文件]

复现步骤
[复现问题的步骤]

1. 在app.tsx中import './styles/iconfont.scss'
2. 执行打包命令, 打包后最外层哈希的static文件夹缺失iconfont文件;

现在放在一个文件夹下也不管用了

iconfont.scss文件内容如下:

@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1565754014632');
/* IE9 /
src: url('iconfont.eot?t=1565754014632#iefix') format('embedded-opentype'),
url('iconfont.woff?t=1565754014632') format('woff'),
url('iconfont.ttf?t=1565754014632') format('truetype'),
/ chrome, firefox, opera, Safari, Android, iOS 4.2+ /
url('iconfont.svg?t=1565754014632#iconfont') format('svg');
/ iOS 4.1- */
}

打包后app.wxss如下:
@font-face {
font-family: "iconfont";
src: url("http://localhost:8080/test/d5716c52.eot");
/* IE9 /
src: url("http://localhost:8080/test/d5716c52.eot") format("embedded-opentype"), url("http://localhost:8080/test/695ff911.woff") format("woff"), url("http://localhost:8080/test/dd0a5ecd.ttf") format("truetype"), url("http://localhost:8080/test/29befde8.svg") format("svg");
/ iOS 4.1- */ }

**期望行为**
[能正常打包出来,或者出个用法也可以啊]

**报错信息**

[无报错信息, app.wxss中iconfont引用了哈希后的地址, 但是static文件夹中不包含hash文件]
你们能不能跑一把,试一发啊, 时好时坏的, 确定不是你们的问题, 给个正确用法也可以呀

**系统信息**
> Taro v1.2 及以上版本已添加 `taro info` 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

Taro CLI 1.3.13 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.1.0 - ~/.nvm/versions/node/v11.1.0/bin/node
      Yarn: 1.15.2 - ~/.nvm/versions/node/v11.1.0/bin/yarn
      npm: 6.10.3 - ~/.nvm/versions/node/v11.1.0/bin/npm
报错平台: 微信小程序:

**补充信息**
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[cleverTom]

@yuche
你好, 看了taro/cli的compileScript.js 文件,
postcss的process的to并没有配置,应该是taro自己处理,
但是看url-loader的配置并没有特殊的地方,这块没有地方调用copyFilesFromSrcToOutput,并没有产生拷贝静态资源的行为, 所以iconfont的文件并没有去处理, 能否麻烦看下这个问题呢,然而昨天还是好的

[luckyadam]

这里的静态资源路径，写相对路径

[cleverTom]

这里的静态资源路径，写相对路径

写了./iconfont.eot也是不行的,
如下: src: url('./iconfont.eot?t=1565850393309'); /* IE9 */ 这样子也打包不出来

[cleverTom]

微信小程序端如果开启了静态资源打包, 即使引用了在线的iconfont会被会被编译成sass文件, 在线的也不能使用了,不知道为什么要被编译成sass文件,


这个问题是否也一起看下呢 @luckyadam

[luckyadam]

微信小程序端如果开启了静态资源打包, 即使引用了在线的iconfont会被会被编译成sass文件, 在线的也不能使用了,不知道为什么要被编译成sass文件,


这个问题是否也一起看下呢 @luckyadam

这个是微信小程序的行为，不太清楚

[luckyadam]

这里的静态资源路径，写相对路径

写了./iconfont.eot也是不行的,
如下: src: url('./iconfont.eot?t=1565850393309'); /* IE9 */ 这样子也打包不出来

这个最好提交个 demo 看下，正常来说微信小程序本身就不支持在样式文件中引用本地文件，所以 Taro 编译时会转成 base64 ，https://taro-docs.jd.com/taro/docs/static-reference.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A0%B7%E5%BC%8F%E4%B8%AD%E5%BC%95%E7%94%A8%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90

[cleverTom]

微信小程序端如果开启了静态资源打包, 即使引用了在线的iconfont会被会被编译成sass文件, 在线的也不能使用了,不知道为什么要被编译成sass文件,


这个问题是否也一起看下呢 @luckyadam

这个是微信小程序的行为，不太清楚

不是 我看的是dist打包出来的wxss文件, 被编译成了scss文件,这个应该是taro编译时的问题吧, 打开静态资源是我在taro的config里面配置的, 处理掉了我先上的iconfont的url引用

[cleverTom]

这里的静态资源路径，写相对路径

写了./iconfont.eot也是不行的,
如下: src: url('./iconfont.eot?t=1565850393309'); /* IE9 */ 这样子也打包不出来

这个最好提交个 demo 看下，正常来说微信小程序本身就不支持在样式文件中引用本地文件，所以 Taro 编译时会转成 base64 ，https://taro-docs.jd.com/taro/docs/static-reference.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A0%B7%E5%BC%8F%E4%B8%AD%E5%BC%95%E7%94%A8%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90

这个url的处理是postcss的处理,之前的版本应该是为将eot文件拷贝到最外层的static文件夹里面的,这个版本不会了,这个拷贝行为应该是taro做的,因为微信小程序端的taro没有引用webpack,稍等我传个demo

[cleverTom]

这里的静态资源路径，写相对路径

写了./iconfont.eot也是不行的,
如下: src: url('./iconfont.eot?t=1565850393309'); /* IE9 */ 这样子也打包不出来

这个最好提交个 demo 看下，正常来说微信小程序本身就不支持在样式文件中引用本地文件，所以 Taro 编译时会转成 base64 ，https://taro-docs.jd.com/taro/docs/static-reference.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A0%B7%E5%BC%8F%E4%B8%AD%E5%BC%95%E7%94%A8%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90

创建了一个demo仓库,麻烦看下,现在问题就是两个:

1. 本地scss中的iconfont文件,url中的iconfont静态资源引用没有拷贝到static文件夹,看文档之前的版本应该是可以的, 我前几天还可以用这个功能,时好时坏的;
2. 假设taro不处理iconfont的静态引用,那我配置线上的cdn地址, 开启了图片的静态资源引用, 会出现其他的case,将会线上的iconfont的地址替换成了莫名其妙的scss文件,导致文件缺失;

仓库地址: https://github.com/linkMHran/taro-demo

[cleverTom]

这里的静态资源路径，写相对路径

写了./iconfont.eot也是不行的,
如下: src: url('./iconfont.eot?t=1565850393309'); /* IE9 */ 这样子也打包不出来

这个最好提交个 demo 看下，正常来说微信小程序本身就不支持在样式文件中引用本地文件，所以 Taro 编译时会转成 base64 ，https://taro-docs.jd.com/taro/docs/static-reference.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A0%B7%E5%BC%8F%E4%B8%AD%E5%BC%95%E7%94%A8%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90

这个问题不修了吗...

[WangShuXian6]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素

看来必须为小程序准备一套 image 格式的图标了

[cleverTom]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素

看来必须为小程序准备一套 image 格式的图标了

微信小程序是支持伪类元素的, iconfont可以使用的

[WangShuXian6]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素
看来必须为小程序准备一套 image 格式的图标了

微信小程序是支持伪类元素的, iconfont可以使用的

没有测试成功，在 h5 上正常，在 微信小程序上空白

看到别人的一片文章对图标字体样式做了修改，还没测试,但他的已经不是标准的图标字体了

准备在小程序上使用 svg 格式的图标，这样可以统一换色

https://songkeys.github.io/posts/taro-practice/ 7

[cleverTom]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素
看来必须为小程序准备一套 image 格式的图标了

微信小程序是支持伪类元素的, iconfont可以使用的

没有测试成功，在 h5 上正常，在 微信小程序上空白

看到别人的一片文章对图标字体样式做了修改，还没测试,但他的已经不是标准的图标字体了

准备在小程序上使用 svg 格式的图标，这样可以统一换色

https://songkeys.github.io/posts/taro-practice/ 7

微信小程序的组件是web component的,要使用全局类名要加addGlobalClass,确认下是否加了吧

[WangShuXian6]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素
看来必须为小程序准备一套 image 格式的图标了

微信小程序是支持伪类元素的, iconfont可以使用的

没有测试成功，在 h5 上正常，在 微信小程序上空白
看到别人的一片文章对图标字体样式做了修改，还没测试,但他的已经不是标准的图标字体了
准备在小程序上使用 svg 格式的图标，这样可以统一换色

https://songkeys.github.io/posts/taro-practice/ 7

微信小程序的组件是web component的,要使用全局类名要加addGlobalClass,确认下是否加了吧

大佬可否给个样板代码，在页面加了 addGlobalClass 仍然无效

组件用函数式写的，所以没加 addGlobalClass

[mihuartuanr]

下载到本地，啥也没改

//config/index.js
  copy: {
    patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      },
      {
        from: 'src/assets/fonts/',
        to: 'dist/assets/fonts/'
      },
      {
        from: 'src/components/vant-weapp/picker-column/index.wxs',
        to: 'dist/components/vant-weapp/picker-column/index.wxs'
      },
    ],
    options: {
    }
  },

然后，在app.js中import './assets/fonts/iconfont.css'

[cleverTom]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素
看来必须为小程序准备一套 image 格式的图标了

微信小程序是支持伪类元素的, iconfont可以使用的

没有测试成功，在 h5 上正常，在 微信小程序上空白
看到别人的一片文章对图标字体样式做了修改，还没测试,但他的已经不是标准的图标字体了
准备在小程序上使用 svg 格式的图标，这样可以统一换色

https://songkeys.github.io/posts/taro-practice/ 7

微信小程序的组件是web component的,要使用全局类名要加addGlobalClass,确认下是否加了吧

大佬可否给个样板代码，在页面加了 addGlobalClass 仍然无效

组件用函数式写的，所以没加 addGlobalClass
先看下小程序端的iconfont有没有打包进去,如果有的话,走下面这步,
用到的组件加addGlobalCass, 如果是函数式, 在函数名.options = {addGlobalClass: true}这样子加一下

[WangShuXian6]

图标字体是用伪元素实现的，而小程序上并没有发现伪元素
看来必须为小程序准备一套 image 格式的图标了

微信小程序是支持伪类元素的, iconfont可以使用的

没有测试成功，在 h5 上正常，在 微信小程序上空白
看到别人的一片文章对图标字体样式做了修改，还没测试,但他的已经不是标准的图标字体了
准备在小程序上使用 svg 格式的图标，这样可以统一换色

https://songkeys.github.io/posts/taro-practice/ 7

微信小程序的组件是web component的,要使用全局类名要加addGlobalClass,确认下是否加了吧

大佬可否给个样板代码，在页面加了 addGlobalClass 仍然无效

组件用函数式写的，所以没加 addGlobalClass
先看下小程序端的iconfont有没有打包进去,如果有的话,走下面这步,
用到的组件加addGlobalCass, 如果是函数式, 在函数名.options = {addGlobalClass: true}这样子加一下

非常感谢大佬，按照大佬的方法果然成功了。图标字体可以用了。

另外1:图标字体的 font-size 属性只对h5 端起作用，对小程序无效。

另外2，请问taro 里面是否可以做到像 document.body.style.setProperty("--theme-color", themeColor); 这样 动态改变一个 css 变量，然后图标字体全局样式使用这个变量，达到动态改变全部图标字体颜色的效果？【h5 端支持】

[tourze]

这几年用taro下来，发现taro下最佳的iconfont方案，很可能是iconpark + svg。
因为这个方案能兼容 小程序、H5、RN，而且渲染效果比其他方案要理想。
可以尝试下 https://github.com/yangger6/iconpark-miniprogram 下这个。