如何使用 SCSS 加载 font-awesome ？

为了在 SCSS 中加载字体很棒的图标，您需要按照以下步骤操作：

• 安装 Font-Awesome 入门套件：转到 font-awesome 网站并下载免费的 Web 入门套件。
• 在您的目录中创建一个项目：在您的项目目录中创建 2 个文件夹：
  • 上市
  • 资源

  public文件夹将包含您的 html 和 css 文件，而资源文件夹将包含您的 scss 文件。

• 在终端中运行 npm init：通过运行 npm init 命令创建 package.json 文件来初始化 npm。

  npm init

• 安装 node-sass：运行 npm init 命令后，安装一个名为“node-sass”的库。此命令将本机将 scss 编译为 css。
  注意： Node-sass 需要作为开发依赖安装。

  npm install node-sass --save-dev

• 在资源中创建一个文件夹：在资源文件夹中创建一个名为 assets 的文件夹。解压下载的 font-awesome 入门套件，复制 scss 文件夹并将其粘贴到 assets 文件夹中。
• 将 webfonts 添加到 public 文件夹：在 css 文件夹中创建 style.css 文件。复制 webfonts 文件夹并将其粘贴到公共文件夹中。
• 编辑 scss 文件夹中的 _variables.scss 文件：打开变量文件并通过写入 webfont 文件夹的路径来编辑“$fa-font-path”。

  // Variables
  // --------------------------
  
  $fa-font-path:         "../webfonts" !default;
  
  

• 在 scss 文件夹中创建一个 style.scss 文件：在 scss 文件夹中创建一个文件 style.scss 并导入字体真棒。

  @import "fontawesome.scss";
  @import "solid.scss";
  

• 创建一个index.html文件：在public目录下创建一个index.html文件，添加如下代码：

• 编辑 package.json 文件中的脚本字段：

  "scripts": {
      "compile:sass": "node-sass resources/assets/scss/style.scss public/css/style.css -w"
    }
  

  此命令将在跟踪更改的同时将 scss 转换为 css 文件。

• 编译您的代码：打开终端并使用以下命令：

  npm run compile:sass

注意：如果编译后在 style.css 文件中遇到以下错误，请注释/删除“-ms-filter”行。