我在让引导图标与 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",