gpt4 book ai didi

html - 如何正确导入 font-awesome scss

转载 作者:可可西里 更新时间:2023-11-01 12:56:35 24 4
gpt4 key购买 nike

我正在尝试通过 scss 将来自 font-awesome 的图标与 webpack 4 一起使用。
webconfig 文件如下所示:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");

module.exports = {
entry: ["./src/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true
}
}
]
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: "file-loader",
options: {
name: "style.css"
}
},
{ loader: "extract-loader" },
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer({ grid: false })]
}
},
{
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name][hash].[ext]",
outputPath: "fonts/"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new CopyWebpackPlugin([
{
from: "public"
}
])
]
};

我导入的 scss 如下:

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";  

并使用:

    <a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
<i class="fas fa-inbox mdc-list-item__graphic"></i>Inbox
</a>

显示:

enter image description here

一个矩形而不是一个图标。我究竟做错了什么?完整示例在 github 上.

最佳答案

我在将 font-awesome scss 导入我的项目时遇到了同样的问题,这对我有用。

@import "~@fortawesome/fontawesome-free/scss/fontawesome"; 

关于html - 如何正确导入 font-awesome scss,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51059093/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com