search

surmon-china / vue-quill-editor

@quilljs editor component for @vuejs(2)
https://github.surmon.me/vue-quill-editor
MIT License
7.38k stars 1.03k forks source link

Editor appearance breaks after building #398

Open yarduza opened 4 years ago

yarduza commented 4 years ago

中文用户注意：

  1. 尽量用英文描述你的 Issue，你的问题是面向世界的
  2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
  3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
  4. 提问题前，务必仔细阅读 README.md；在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

Steps to reproduce

  1. Open a new project using vue-cli with postcss (tailwindcss, autoprefixer and purgecss).
  2. Copy the exact Vue file from the component example page: https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-quill-editor/examples/01-theme-snow.vue
  3. Deploy to firebase

What is Expected?

An editor that looks like in the example page: https://github.surmon.me/vue-quill-editor/

What is actually happening?

While working locally everything is fine. When building and deploying (firebase), the display of the editor breaks. The toolbar buttons appear huge one under the other as can be seen in the attached screenshot.

Local version:

CleanShot 2020-04-09 at 12 49 13@2x

After building and deploying:

CleanShot 2020-04-09 at 12 30 22@2x
yarduza commented 4 years ago

Traced the issue to PurgeCSS. Without it, everything is fine, with it enabled I get the above results. I'll update if I can find anything else.

yarduza commented 4 years ago

adding <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css"> solves the issue. I can't make it work with importing the libraries locally.