MiniCssExtractPlugin中字体的路径错误
MiniCssExtractPlugin是一个用于将CSS提取为独立文件的webpack插件。它的作用是将CSS从打包生成的JavaScript文件中提取出来，以减小文件体积并优化加载速度。
在MiniCssExtractPlugin中，字体的路径错误可能是由于配置问题或文件路径设置不正确导致的。解决这个问题的方法如下：
- 确保字体文件存在于正确的路径下。检查字体文件的位置，并确保路径设置正确。通常，字体文件应该位于与CSS文件相同的目录下或相对于CSS文件的正确路径下。
- 检查webpack配置文件中MiniCssExtractPlugin的相关配置。确保在webpack配置文件中正确配置了MiniCssExtractPlugin，并指定了正确的输出路径和文件名。
- 检查CSS文件中字体路径的设置。在CSS文件中，字体路径应该相对于CSS文件的位置进行设置。可以使用相对路径或绝对路径来指定字体文件的位置。
- 使用相对路径来引用字体文件。相对路径可以确保在不同环境中都能正确引用字体文件。例如，使用相对于CSS文件的路径来引用字体文件：
url('../fonts/font.woff')。 - 检查字体文件的加载方式。确保字体文件的加载方式正确，例如使用
@font-face规则或通过import语句引入字体文件。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，适用于存储和管理各种类型的非结构化数据。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云CDN：提供全球加速、安全稳定的内容分发网络服务，可加速网站、应用、音视频等内容的传输。详情请参考：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：提供弹性、安全、稳定的云端服务器，可满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
以上是针对MiniCssExtractPlugin中字体路径错误的解决方法和腾讯云相关产品的介绍。希望对您有所帮助！
相关·内容
1回答
MiniCssExtractPlugin中字体的路径错误
javascript、webpack、bundle、bundler
我有一个404错误，因为字体路径是错误的。现在是dist/font，但页面尝试在dist/style/font找到它。这是我的配置jsfiddle.net/sicely/z8g5sr9e@font-face { src:/assets/fonts/Roboto-Black.
浏览 21提问于2020-06-07得票数 0
回答已采纳
2回答
Webpack迷你-css-解压缩-插件@字体-脸url分辨率问题
webpack、path、font-face、webpack-file-loader、mini-css-extract-plugin
http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.woff 404 (Not Found)我不明白它为什么要将css目录添加到字体url中。唯一提到dist/css路径的是MiniC
浏览 1提问于2020-03-04得票数 6
5回答
Webpack 5:文件加载程序生成带有散列名称的字体副本。
javascript、css、webpack、fonts、webpack-5
我使用文件加载器加载应用程序的字体： test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?/fonts/' }]字体也是在我指定的结构中生成的: dist/assets/fonts。outputPath: 'assets/fonts/' ...它似乎是正确的。
但是： Webpack还在/
浏览 8提问于2021-08-03得票数 23
4回答
模块生成失败(来自./node_modules/mini-css-extract-plugin/dist/loader.js)：ReferenceError: document未定义)
javascript、css、reactjs、webpack、sass
好的，基本上在部署之前我们用webpack来捆绑我们的资源。然而，现在我们也想通过webpack捆绑我们的sass文件--它简化了我们的构建，process.it进行得很好，但是现在bundle.js太大了，无法在生产上部署，所以我想拆分bundle.js和样式文件因此，我去并调整了web-pack.config文件，根据迷你css-提取插件的文档，但我得到了太多的错误。有人能引导我拆分样式文件并从bundle.js中提取它吗？ERROR i
浏览 7提问于2020-08-22得票数 29
回答已采纳
1回答
字体urls路径错误，包括WebPack生成后的css路径。
javascript、reactjs、webpack
我想不出合适的组合来让这一切都快乐起来。我让MiniCssExtractPlugin创建css或更少的文件遇到。然后，webpack.config.js正在用MiniCssExtractPlugin做它的魔术。url中，因此删除了字体-url
浏览 2提问于2020-08-04得票数 0
1回答
Webpack 4/字体-5美元发-字体-路径黄后css出口
webpack、font-awesome
我现在正在学习webpack，我在魔法上遇到了一些麻烦，这是webpack做的。@import "~@fortawesome/fontawesome-free/scss/regular.scss";
我必须将$fa-字体路径v
浏览 0提问于2018-10-20得票数 1
回答已采纳
1回答
Webpack 4如何获得正确的字体路径
webpack、font-awesome
我正在使用webpack 4来生成和分离我的应用程序资源文件，基本上这就是我想要的： ? 但是我使用的是font - and，一些font -and类使用的是字体文件，所以我对字体文件有404个错误： ? 那么我该如何让它工作呢？以下是我的webpack配置的摘录： module.exports = { output: {
filename: &#
浏览 11提问于2020-04-13得票数 0
回答已采纳
1回答
Webpack不能解释文件吗？
webpack、babeljs、webpack-5
我试图用webpack的反应和ts，以便我可以优化我的网站，然而，我已经到了一个绊脚点。下面是我的webpack.config.js文件，我认为这是正确的，但也许不是？下面是错误的图像。/src/index.html'), ],
这种情况发生在CSS和webp文件中，但是您只能在屏幕截图中看到CSS。webpack.config.js - package.
浏览 6提问于2022-05-08得票数 0
回答已采纳
4回答
vue-cli@3没有可用于依赖类型的模块工厂: CssDependency
javascript、vue.js、webpack、vue-cli
当我用vue-cli@3系统提示生成此错误No module factory available for dependency type: CssDependency但是这个错误仍然发生，我想知道如何解决这个问题。以下是我错误的细节
ERROR Error: No module factory ava
浏览 0提问于2020-01-03得票数 15
回答已采纳
2回答
在webpack中配置字体
css、webpack、sass、fonts
我和webpack有点小问题，我不能加载字体。path');const MiniCssExtractPlugin = require('mini-css-extract-plugin'); } ]}; 这将构建我的css，尽管这样我的本地字体就不会被包含/呈现。，我想调整scss文件中</e
浏览 21提问于2019-12-06得票数 1
1回答
为什么CSS urls不触发Webpack文件加载器？
javascript、css、webpack、webpack-4、webpack-file-loader
我试图让Webpack吸收我们的图像文件，这些图像文件是从.scss文件引用的。然而，我没有尝试过任何实际触发文件加载器的操作。我们的CSS被很好地捆绑在一起，但是CSS中的任何url()引用似乎都是完好无损的，并且没有发出任何图像文件。
参见下面的示例sass和当前的webpack配置。我可以验证文件扩展名regex是否正确，并且更改加载器的顺序似乎没有任何影响。还需要其他步骤来确保文件加载器能够看到CSS中<em
浏览 0提问于2018-11-10得票数 3
1回答
Font用less.js和webpack加载成盒子很棒
javascript、webpack、less、font-awesome、mini-css-extract-plugin
编译更少的文件，因为在编译过程中没有定义窗口，但是现在令人敬畏的字体图标显示为方框，我不知道为什么。当我使用样式加载器而不是MiniCssExtractPlugin.loader时，字体很棒的图标显示得很好，但我只在加载.less文件时做了这个更改，而不是其他任何东西，所以我不明白为什么它会受到影响。我试着按照建议的here将.fa, .far, .fas { font-family: FontAwesome !important; }添加到我<e
浏览 36提问于2021-08-09得票数 1
回答已采纳
1回答
Webpack不把CSS输出到烧瓶文件夹中，结果是空的。
javascript、css、node.js、flask、webpack
这是我的webpack config.jsconst MiniCssExtractPlugin = require('mini-css-extract-plugin(css)/, } plugins: [
new
浏览 1提问于2020-04-20得票数 1
回答已采纳
1回答
Webpack 5字体无法解码的问题& OTS解析错误
webpack、fonts
请有人解释一下我和Webpack之间的问题。我以前从来没有用过Webpack做字体，也遇到过一些头疼的问题，我一直没能解决。我正在使用url()从.css文件中提取字体。在Webpack做完这件事后，我得到的是3个.woff文件，它们的名称被更改为类似于散列的名称。然后，我有一个字体文件夹中的3种字体命名正确。查看main.css ( Webpack生成的那个)，url()现在正在
浏览 11提问于2021-08-18得票数 7
回答已采纳
1回答
在netlify css ./node_node/gatsby/node_node/css-加载程序上部署失败
css、json、deployment、gatsby、netlify
调试Netlify：
11:38:12上午:警告块样式迷你-css-提取-插件11:38:12上午:冲突的顺序。添加了以下模块: 11:38:12 AM：* css ./node_modules/typeface-roboto/index.css 11:38:12 AM:尽管无法用这些模块完成所需的排序: 11:38:12 AM：* css ./node_modules/typeface-montserrat/index.css 11:38:12 AM：-无法满足块组组件的期望顺
浏览 2提问于2020-01-23得票数 3
1回答
Webpack 4使用更少和MiniCssExtractPlugin使用条目
webpack、less、webpack-style-loader、webpack-4、mini-css-extract-plugin
/common/common.less")const MiniCssExtractPlugin = require("mini-css-extract-plugin"); entry: {(less)$/, MiniCssExtr
浏览 0提问于2018-08-03得票数 7
回答已采纳
1回答
webpack字体太棒了，在根目录下转储文件
webpack、font-awesome
下面是webpack.config，当我在index.js中导入令人敬畏的字体时，webpack正在将所有字体文件转储到根目录(dist)。字体规则可以将它们放入“字体”子文件夹中，但它也会以这种奇怪的格式(导出命令)将它们转储到根文件中。
浏览 1提问于2021-08-04得票数 0
回答已采纳
2回答
如何使用"mini-css-extract-plugin“指定输出目录？
webpack、webpack-4、mini-css-extract-plugin
我正在使用mini-css-extract-plugin将CSS从一个包中提取到一个文件中。我需要将该文件放到文件系统中的不同位置。如何配置mini-css-extract-plugin以将CSS文件放到与JS包不同的路径？
浏览 3提问于2018-10-19得票数 21
回答已采纳
2回答
在Phoenix框架中使用webpack提供字体服务
webpack、elixir、phoenix-framework
我使用的是Phoenix 1.4 rc和webpack(默认情况下)。而且我在我的应用程序中提供字体时遇到了问题。我在assets/fonts folder.then run it中添加了字体。:0)所以我在谷歌上搜索了一下，并在webpack.config.js中添加了这段代码{
loader: "babel-load
浏览 2提问于2018-11-07得票数 2
3回答
Webpack: mini- css -extract-plugin不输出css文件
javascript、webpack、sass
我想要的是生成一个css文件，而不是用js加载到样式标签中。我的设置是：const BundleTracker = require('webpack-bundle-tracker');const MiniCssExtractPlugi
浏览 1提问于2019-04-04得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
