webpack - Bootstrap 图标和 Webpack 5 - 你可能需要一个合适的加载器来处理这个文件类型
问题描述
我在让引导图标与 webpack 一起工作时遇到了很多麻烦:
获得以下内容:
ERROR in ./node_modules/bootstrap-icons/font/bootstrap-icons.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @font-face {
| font-family: "bootstrap-icons";
| src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") format("woff2"),
@ ./src/index.js 3:0-50
使用 webpack 规则:
{
test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?((v=\d+\.\d+\.\d+)|(\w*)))?$/,
use: { loader: "file-loader?name=/[hash].[ext]" }
},
...
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
}
和 .js 作为
import "./scss/main.scss";
import "bootstrap-icons/font/bootstrap-icons.css";
我已经尝试了我能找到的一切。我遵循了这个教程的每一行,但仍然无法让它工作: https ://odan.github.io/2021/01/07/webpack-bootstrap-icons.html
webpack: "5.52.1",
"bootstrap-icons": "^1.5.0",
"file-loader": "^6.2.0",
解决方案
我有同样的问题,我通过阅读文档解决了它。我后来发现的问题是 webpack 不会用 purgecss 清除 bootstrap 未使用的图标。
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/inline",
},
推荐阅读
- python - pandas - str(行)基于另一列中的 int 切片
- karate - 未显示运行空手道测试/调试选项
- javascript - 如何将发布版本设置为 Ember 构建的一部分?
- c++ - Neopixel 示例代码在使用更多像素时崩溃
- python - 有没有办法从图像中只提取所需的文本?
- metrics - 有效的每月活跃用户数是多少?
- javascript - 未显示动态添加到 nanogallery2 的项目
- fish - 基于正则表达式有条件地重命名文件
- javascript - 拖放动态添加的组件 - 角度 7
- c# - 通过在实体框架模型中创建虚拟导航属性 [必需] 来防止发布不足攻击