html - 如何正确导入 font-awesome scss
问题描述
我正在尝试通过 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>
表明:
一个矩形而不是一个图标。我究竟做错了什么?完整的例子在github 上。
解决方案
我在将字体很棒的 scss 导入我的项目时遇到了同样的问题,这对我有用。
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
推荐阅读
- angular - 无法在 catcherror Angular 6 中设置超时
- audio - 使用 UWP 监控实时音频并检测枪声/拍手声
- jmeter - 响应代码:503 响应消息:服务不可用
- sql-server - 操作数数据类型“text”对“max”运算符无效
- vb.net - 如何在 Outlook 加载项打开时启用选择新电子邮件?
- c# - 使用 IE11 在 C# 上使用 IEDriverServer 和 Selenium 时出现内存泄漏
- php - 我提交此表单时出现此错误“HTTP ERROR 500”。谁能告诉我如何解决这个问题?
- android - 项目菜单标题长于 DrawerLayout
- c# - 在 .Net Core 2.0 WebAPI 控制器中获取当前的 http 上下文用户
- drools - 添加到 Business Central 以发现 Kie 执行服务器的属性?