首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

mini- css -extract-plugin抛出模块分析失败:css文件中@font-face上出现意外字符'@‘错误

mini-css-extract-plugin是一个Webpack插件,用于将CSS从打包的Javascript代码中提取出来,以单独的CSS文件形式存在。它的主要作用是优化前端代码的加载性能。

该插件通过分析CSS文件中的@font-face声明,提取其中定义的字体文件,以便在浏览器中正确加载和显示自定义字体。然而,当CSS文件中的@font-face声明中出现意外字符'@'时,就会抛出模块分析失败的错误。

解决这个错误的方法通常有两种:

  1. 检查CSS文件中的@font-face声明,确保其语法正确,不含有任何意外字符。特别注意检查每个声明的分号、括号等符号是否正确闭合。
  2. 更新mini-css-extract-plugin的版本至最新版,以确保插件能够正确解析CSS文件中的@font-face声明。可以通过在项目的package.json文件中修改版本号,然后执行相应的依赖安装命令来更新插件版本。

需要注意的是,以上解决方法仅适用于解决mini-css-extract-plugin抛出模块分析失败的错误。对于其他问题或错误,可能需要进一步排查和调试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端字体截取技术,做炫酷网站再也不用怕中文字体数据量大啦!【实战】

当然,也不是每个页面都会用到一个字体文件中的所有字符,全量加载本身也极其浪费。...首先是CSS中的unicode-range`属性,我们称之为“软截取技术”,因为它只是在本地既有字体或者浏览器已经下载的字体基础上做一个指向子集的“软链接”,并不能真正减小浏览器下载文件的大小。...这个规则后来进入W3C的 CSS Fonts Module Level 3 模块,于是就有了前端常用的Web自定义字体技术: @font-face { font-family: 'MyWebFont...要分析的远程文件(这里是一个本地Web服务): http://127.0.0.1:8080/index.html --family='custom' 指定只分析以上页面中应用了 font-family:...结果如下: 用法二:分析网页用到汉字子集 可能有读者没有注意到,上面例子中glyphhanger输出的码点是按照每个字符在Unicode编码中的顺序从小到大排序过的。

3K20

移动端引入的字体文件过大处理方法

三.Font-Spider(字蛛) 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。...CSS 与 HTML 文件获取没有WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!...使用fontmin可以按需提取字体中的部分字型,最小化打包字体,自动生成 WebFont 字体文件(ttf/woff/eot/svg)和 CSS 文件, 并可利用 @font-face 将自定义字体呈现到网页中...css文件,字体文件也会由原来的即M变成几k了. node fontmin.js Fontmin还提供了客户端, 直接把 TTF 拖进去,左侧输入需要文字,右侧实时看效果。...建议还是使用node模块的方式, 只要在项目中配置好, 以后再有任何文字需要使用字体, 直接添加到fontmin.js中的text中,执行node fontmin.js命令就搞定了. 4.缺点 Fontmin

7.6K220
  • Web 中文字体性能优化实践

    规则,我们只需要将字体源文件上传至 cdn,让 @font-face 规则的 url 值为该字体的地址,最后将这个规则应用在 Web 文字上,就可以实现字体的预览效果。...CSS unicode-range特定字符使用font-face自定义字体 fontmin fontmin 是一个纯 JavaScript 实现的字体子集化方案。...Buffer 转为 base64 格式嵌入在 @font-face 中返回给客户端,然后客户端将该 @font-face 以 CSS 形式插入 标签中即可。...对于固定的预览内容,我们也可以先生成字体文件保存在 CDN 上,但是这个方式的缺点在于如果 CDN 不稳定就会造成字体加载失败。...本次工作的回顾和总结过程中,也在思考更好的实现,如果你有建议欢迎和我交流。同时文章的内容是我个人的理解,存在错误难以避免,如果发现错误欢迎指正。 感谢阅读!

    2.2K10

    CSS中的@关键字

    大家可能在CSS中见到过字符@然后加一些关键字的用法,这种用法就称之为AT规则,在CSS中,种类还是很多的,这里总结列举下。...某些软件,例如Dreamweaver新建CSS文件时候,自动会带有下面所示代码,但实际开发时候,作用不大,因为meta中已经有所设置(),会覆盖,所以我都是直接删掉的...但,本地开发可以使用,用做CSS模块化开发,然后使用一些(如grunt)工具进行压缩并合并。...但是呢,相比less, sass等还是有不足,就是@import语句只能在CSS文件顶部,使得文件的前后关系控制,就不那么灵活。...@import ‘global.css’; @namespace 此规则应用到XML HTML(XHTML)上特别有用,因为这样的话XHTML元素可以作为选择器在CSS中使用。

    1.2K10

    用webfont为你的网站添加图标

    有些网站的图标不存在对应的图片文件,也并非通过js画图,它们的CSS长这样: h2::before{ content:'\e942' } 实际上e942是这个字符的16进制unicode编码,在unicode...编码中,E000-F8FF是用户自定义区,形状可以任意制定。...css引入webfont: @font-face { font-family:;/**相当于变量名,可以自己定义,如果元素中的font-family对应这里,@font-face为这些元素定义了字体族,...他们将使用src定义的字体**/ src:;/**使用的字体,可以是local("font名称")或者url("url地址"),支持多个来源**/ } @font-face还可以为不同格式、不同字重的文字匹配字体...,也可以为特定字符匹配特定字体,想了解更多可以参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face 真正了解CSS3背景下的@font

    92220

    Web-Fontmin -- 在线提取你需要的字体

    本文作者:IMWeb forsigner 原文出处:IMWeb社区 未经同意,禁止转载 关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体...提供了 ttf子集化,eot/woff/svg格式转换,css生成 等功能,助推 webfont 发展,提升网页文字体验。...,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几KB。...Fontmin 的工具 fontmin-app - Fontmin 桌面版 App,需下载安装使用 gulp-fontmin - Fontmin 的 Gulp 插件 font-spider - 自动分析页面使用的...Web-fontmin 不是什么高大上的东西,一个基于 Fontmin 构建的字体工具,它的用处只有两个: 提取字体 字体格式转换 通俗的理解,Web-fontmin 是一个这样的工具:Squirrel

    3.8K30

    如何优雅地解决平台字体适应问题

    由于国产化进程的不断推进,冒出了不少基于 Linux 的国产操作系统,这就导致我们平时在 windows 上使用的好好的字体,在这些国产操作系统上就失效了,其原因是这些操作系统上没有安装对应的字体。...分析 我们的项目中用到了 ace_editor 脚本编辑器,通过圆度源码得知,它在计算光标位置时,依靠的是字体宽度,这就要求必须使用等宽字体才行,否则,会因计算位置错误而引起光标错位。...CSS 字体知识 熟悉 CSS 的同学应该都知道,我们可以通过 CSS 引入字体文件并定义字体名称,比如: // font.css /* 定义字体名称、引入等宽字体文件 */ @font-face {.../css/font/ 路径下,并在 CSS 文件中引入和使用: // ..../css/font.css /* 定义字体名称、引入等宽字体文件 */ @font-face { font-family: "JetBrainsMono-Regular"; src: url

    74210

    网页特殊字体过大的优化

    html网页引用中文字体,文件过大,加载缓慢的解决办法 解决办法: 一、字蛛 原理 爬行本地 html 文档,分析所有 css 语句 记录@font-face语句声明的字体,并且记录使用该字体的 css...选择器 通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本 找到字体文件并删除没被使用的字符 编码成跨平台使用的字体格式 ==font-spider 仅适用于固定文本,如果文字内容为动态可变的...--发现字体文件的根目录多了一个font文件夹,文件夹里存放的是原来字 体文件的备份,而网页引用的是使用字蛛后压缩保存的字体--> 二、在线提取字体 字体生成器 css--> .font { font-size: 32px; color: skyblue; font-family: 'sx';...} @font-face { font-family: 'sx'; src: url('suxin-subfont.ttf') format('truetype

    1.7K50

    Web-Fontmin -- 在线提取你需要的字体

    关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?...提供了 ttf子集化,eot/woff/svg格式转换,css生成 等功能,助推 webfont 发展,提升网页文字体验。...,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几KB。...Fontmin 的工具 fontmin-app - Fontmin 桌面版 App,需下载安装使用 gulp-fontmin - Fontmin 的 Gulp 插件 font-spider - 自动分析页面使用的...Web-fontmin 不是什么高大上的东西,一个基于 Fontmin 构建的字体工具,它的用处只有两个: 提取字体 字体格式转换 通俗的理解,Web-fontmin 是一个这样的工具:Squirrel

    7.9K81

    前端基础精简总结

    ,即编译时加载 CMD和AMD是在运行时确定依赖关系,即运行时加载 详情: AMD && CMD ES6 模块化 每一个ES6模块都是一个包含JS代码的文件,模块本质上就是一段脚本,而不是用module...Sprite,Iconfont,@font-face Sprite图 为了减少http请求的次数,一般会将常用的小图标排到一个大图中,页面加载时只需请求一次网络,在css中通过设置background-position...来控制显示所需要的小图标 Iconfont 即字体图标,就是将常用的图标转化为字体资源存在文件中,通过在CSS中引用该字体文件,然后可以直接用控制字体的css属性来设置图标的样式 字体图标的好处是节省网络请求...、其大小不受屏幕分辨率的影响,并且可以任意修改图标的颜色 @font-face 是CSS3中的一个模块 通过@font-face可以定义一种全新的字体,通过css属性font-family来使用这个字体...文件; 生成dom 树 渲染引擎开始解析 html 标签,并将标签转化为DOM节点,生成 DOM树; css文件请求 如果head 标签中引用了外部css文件,则发出css文件请求,服务器返回该文件

    1.7K40

    让你的网站用上炫酷的中文字体

    01 字体难题 自定义中文字体虽炫酷,但有一个弊端,那就是中文字体太大了,很耗费资源,具体的原因其实很简单:英文只有 26 个字母,一张 ASCII 码表上 128 个字符集几乎可以表示任何英文语句。...由于字符集小,字体文件也可以做的非常小;中文字体就完全不同,单单 GB2313 编码的中文字符(含符号)就达到 7445 个,字符数量是 ASCII 码表的 58 倍,而字体设计师需要为每一个中文字符设计字体...04 font-spider-plus 使用方法 根据官方文档,要想使用 font-spider-plus,首先要在 CSS 文件中通过 @font-face 引入全量大小的特殊字体。具体怎么做呢?...也很简单,先写个 CSS 通过 @font-faxe 引入压缩后的字体,格式与第一步中的 index.html 类似: /* fonts-zh.css */ @font-face { font-family...,CSS 中通过相对路径要能找到这些字体文件。

    2.7K20

    04-移动端开发教程-在线字体图标

    在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....节省了带宽(相比图片)字体文件大小也不大(一般几百k)。 在线字体本身是矢量的,放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....在线字体 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,允许我们不依赖操作系统的字体,做到全平台字体统一和定制。...这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4.... /* 自定义在线字体,浏览器会自动下载下面的字体文件 */ @font-face { font-family: 'glyphicons'; src: url('.

    3.3K60

    04-移动端开发教程-在线字体

    在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....节省了带宽(相比图片)字体文件大小也不大(一般几百k)。 在线字体本身是矢量的,放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....在线字体 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,允许我们不依赖操作系统的字体,做到全平台字体统一和定制。...这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4.... /* 自定义在线字体,浏览器会自动下载下面的字体文件 */ @font-face { font-family: 'glyphicons'; src: url('.

    3.3K60

    Fontello:免费Web-font 图标大集合(font-face 图标集)

    结合目前的 Web-font 趋势,Fontello 上的图标元素定能让你手中的网站大放异彩!...相关技术探讨 在以前的话,图标在网页设计中的运用都是通过图片的形式来的;使用图片其实有不少问题,比如说放大失真,增加过多http 请求数(即使使用 CSS Sprite 合并图片也不见得有多好)。...CSS3有一个@font-face属性(不过据说 font-face 是CSS2 的产物),@font-face 的本意是用来在线加载自定义字体的(适合于英文字体),但后来这个 @font-face 被发扬光大...通过Jeff 本人实践以及参考相关资料,从利弊两个方面分析Web-font (font-face)的兼容性问题。...利:矢量图标,可以完美支持 放大、改变颜色 等 CSS 层面的修饰而无失真 弊:不兼容某些浏览器(IE)、同比图片式图标,加载的文件容量(字体文件、CSS文件)更大;如果考虑hack,加载更多的CSS

    1.9K60
    领券