如何正确导入font-awesome scss [英] How to import font-awesome scss correctly
本文介绍了如何正确导入font-awesome scss的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试通过scss在webpack 4中使用字体真棒的图标.
webconfig 文件如下所示:
I am trying to use an icon from font-awesome with webpack 4 via scss.
The webconfig file looks as following:
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:
I imported the scss as following:
@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 上.
a rectangle instead an icon. What am I doing wrong? The fully example is on github.
推荐答案
我遇到了同样的问题,即将字体超棒的scss导入到我的项目中,这对我有用.
I hit the same issue importing the font-awesome scss into my project, this is what worked for me.
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
这篇关于如何正确导入font-awesome scss的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文