[英]Bootstrap icons and Webpack 5 - You may need an appropriate loader to handle this file type
I'm having a lot of trouble getting bootstrap icons to work with webpack:我在让引导程序图标与 webpack 一起工作时遇到了很多麻烦:
Getting the following:得到以下内容:
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
With webpack rules:使用 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"
]
}
And.js as和.js一样
import "./scss/main.scss";
import "bootstrap-icons/font/bootstrap-icons.css";
I've tried everything I could find.我已经尝试了我能找到的一切。 I followed every line of this turoial, and still can'f get it to work: https://odan.github.io/2021/01/07/webpack-bootstrap-icons.html
我按照这个 turoial 的每一行,仍然无法让它工作: 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",
I had the same problem, i kind of solved it by reading the documentation .我有同样的问题,我通过阅读文档解决了它。 The problem that i figured afterwards was that webpack doesnt purge bootstrap's unusued icons with purgecss.
后来我想到的问题是 webpack 没有用 purgecss 清除引导程序未使用的图标。
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/inline",
},
npm install bootstrap-icons
npm install --save-dev mini-css-extract-plugin css-loader postcss-loader sass-loader autoprefixer sass
// Put this at the top of index.js or other entry files
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// Rule for processing the Bootstrap icons
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/i,
type: 'asset/resource',
generator: {
//filename: 'fonts/[name]-[hash][ext][query]'
filename: 'fonts/[name][ext][query]'
}
},
...
// Rule for processing .css and .scss files
{
test: /\.s?css$/,
use: [
// Save the CSS as a separate file to allow caching
MiniCssExtractPlugin.loader,
{
// Translate CSS into CommonJS modules
loader: 'css-loader',
},
{
// Run postcss actions
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
function () {
return [ require('autoprefixer') ];
}
],
},
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: "compressed",
}
}
}
],
},
main.scss
.main.scss
。 Please note the .css extension after bootstrap-icons.@import 'bootstrap-icons/font/bootstrap-icons.css';
<i class="bi-alarm" style="font-size: 3rem;"></i>
Here is the cleanest way I found to make Boostrap Icons work with Webpack 5 (and scss):这是我发现使 Boostrap 图标与 Webpack 5(和 scss)一起工作的最干净的方法:
Step 1: install Bootstrap icons with NPM:第 1 步:使用 NPM 安装 Bootstrap 图标:
npm install --save bootstrap-icons
Step 2: add a rule in your webpack.config.js
to copy all woff2
files in the output directory:第二步:在你的
webpack.config.js
中添加一条规则,复制output目录下的所有woff2
文件:
module.exports = {
module: {
rules: [{
test: /\.woff2?$/,
type: "asset/resource",
}]
}
}
Step 3: in your index.scss
import boostrao icon scss
overrifing font directory:第三步:在你的
index.scss
import boostrao icon scss
覆盖字体目录:
$bootstrap-icons-font-dir: "~bootstrap-icons/font/fonts";
@import "~bootstrap-icons/font/bootstrap-icons.scss";
Step 4: use icons in yout HTML:第 4 步:在 HTML 中使用图标:
<i class="bi-alarm"></i>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.