Question

我正在尝试通过scss在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上。

Answer 1

在输入真棒字体的scss到我的项目中，我遇到了同样的问题，

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

Answer 2

对于其他人，尽管Webpack（4）进行了编译并且 file-loader 正确复制了字体，但仍然遇到无法加载字体的问题（例如显示空的方形字形），我发现使一切按预期加载。

首先，建议使用带有~ node_modules路径的SCSS导入，如其他文章所示：

$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts';
@import '~@fortawesome/fontawesome-pro/scss/fontawesome';
@import '~@fortawesome/fontawesome-pro/scss/light';

然后，您将具有 file-loader 配置（针对字体文件）（如上）。您要向文件加载器选项添加esModule: false option。请注意，这可能会与您可能要在SCSS之外导入的其他字体混淆。

基本上我发现是字体会被复制，但是已编译CSS中的字体文件URL将显示为src: url([object Module]);。默认情况下，为了方便起见，file-loader会将导入的文件转换为模块，但是我们当然不需要在这里使用字体，因此在上面添加选项可以解决此问题。

Answer 3

为Laravel项目获得超棒的字体，下一个对我有用：

首先，我在public / css中搜索了“ fa-fw”。请放心。
npm install --save @fortawesome/fontawesome-free-将文件下载并创建到node_modules。
添加到resources/sass/app.scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/solid';

添加到resources/sass/_variables.scss（对此不确定）

$fa-font-path:        "../webfonts";

构建。 npm run dev
fa现在在您的app.css中。享受！

如何正确导入真棒字体的SCSS

3 个答案: