Node.js 如何使用相对路径在网页包中使用SCS（SASS）加载字体？

我的node_modules文件夹中有字体awesome，因此我尝试将其导入到我的主.scss文件中，如下所示：

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

但是Webpack捆绑编译失败了，告诉我

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

因为font-awome.scss文件引用了相对路径“../fonts/”

---

如何让scss\webpack@import另一个文件，并将该文件的文件夹用作主文件夹，以使其相对路径按预期工作？

似乎没有任何方法@import在scss\SASS中有自己相对路径的文件

因此，我设法开始工作：

• 在my.js或.jsx文件中导入scss\css字体文件，而不是我的样式表文件：
  import 'font-awesome/scss/font-awesome.scss'; 导入'font-awesome/scss/font-awesome.scss'
• 将此添加到我的webpack.config文件：

模块： { 装载机： [ {test:/\.js？$/，loader:'babel loader？cacheDirectory'，exclude:/（node_modules | bower_components）/}， {test:/\.jsx？$/，loader:'babel loader？cacheDirectory'，exclude:/（node_modules | bower_components）/}， {test:/\.scss？$/，加载程序：['style-loader'，'css-loader'，'sass-loader']}， {test://\.svg（\？v=\d+\.\d+\.\d+？$/，loader:'file loader？mimetype=image/svg+xml'}， {test://\.woff（\？v=\d+\.\d+\.\d+？$/，加载器：“文件加载器？mimetype=application/font-woff”}， {test:/\.woff2（\？v=\d+\.\d+\.\d+？$/，加载器：“文件加载器？mimetype=application/font-woff”}， {test://\.ttf（\？v=\d+\.\d+\.\d+？$/，加载器：“文件加载器？mimetype=application/octet stream”}， {test://\.eot（\？v=\d+\.\d+\.\d+？$/，加载器：“文件加载器”}， ] } 使用

其中，

$fa font path

变量出现在

font/scss/_variables.scss

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

---

波浪号“~”由sass loader使用插入。以下内容适用于我：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

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

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

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

这是为了导入项目中所需的

字体

&字体。 其他更改是在

webpack

配置中，使用

文件加载器加载所需字体

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}

通过更改我的
app.scss
解决：

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

这种方法对于保持外部依赖项不变和未版本化非常有用。
我只是在主scss文件中设置了路径，它可以工作：

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

v、 4（SymofOy 4+网页包）

对我来说，有效的方法是添加
解析url加载程序
并启用
源地图

我已经在我的root
.scss
文件中导入了字体：

@import "~font-awesome/scss/font-awesome";
...

此根文件导入到my
main.js
文件中，该文件定义为网页包的入口点：

import './scss/main.scss';
...

然后，我的最终网页模块规则如下所示：

 ...
 {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { loader: 'postcss-loader', options: { sourceMap: true }, },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true }, },
    ],
  }, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: { limit: 1000, name: 'fonts/[name].[ext]', },
  }
  ...

注意：

我使用了
迷你css提取插件
，可以像这样注册：

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),


url加载程序
需要安装
文件加载程序
，因此，如果出现如下错误：
找不到模块文件加载程序
，则只需安装它：

npm i -D file-loader


有用链接：


这就是我的工作原理，诀窍是将
$fa font path
设置为字体路径，如下所示

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

注意：请检查
node_modules
中的字体文件夹，在我的情况下，5.14版的字体是
@fortawesome/fontawesome免费的
，以下内容适用于我：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

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

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

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

我不知道webpack，但是你可以把.eot放在
。/../node\u modules/font awesome/font/fontsome/fontsome webfont.eot
？我可以通过更改font awesome文件来做到这一点，但是我每次更新npm时都会丢失更改，所以这不是一个选项。webpack与express@Richard一起工作？不，不使用expressI我正在使用npm for font awesome sass加载程序。您使用了不同的字体吗？如何处理不同的字体路径？我的意思是，您在那里导入SCS，但无法更改字体文件的路径，例如，如果您需要为生产更改它，并且字体位于不同的文件夹中。有什么想法吗？这就是我需要做的。我还没有改变生产的东西。我想我只是从本地构建中复制所有内容，而不使用路径。否则，可以查看webpack.config.js的输出部分，看看是否可以更改路径。或者只是在package.json脚本部分添加一个后期构建步骤。我更改了加载程序的路径，现在它将从指定的路径加载字体。您不需要在javascript中包含字体awesome scss文件。您仍然可以将其包含在SCS中，只要您按照user137794的建议设置字体路径，然后更新webpack.config文件以说明您建议的字体类型。您使用了哪种npm？我正在使用sass字体加载程序，但没有成功。它对我不起作用，但我只是在我的网站上得到矩形…：/我必须将我的设置为
$fa字体路径：“font-awesome/font”
-即没有波浪线。你能更准确地解释一下你在哪里编辑什么吗？我不明白answer@Richard你能让它为你工作吗？另外，请将此标记为答案！不，我当时用的是下面的答案。你可以避开第一行，用`！默认值`在第2行结束。很遗憾，我无法使用此方法，因为这意味着我不必每次重新编译项目时都更改
\u variables.scss
文件。它不会覆盖
$fa font path
或任何其他变量。。所以不确定你是如何做到的u@Muhammed实际上，像这样加载webfonts有点棘手。当您将sass编译为css时，根据您的编译方式，您的字体可能不会被编译。您可以将webfonts文件夹直接复制到css文件夹旁边的公用/文件夹中。这样，字体可怕的css代码将找到字体，您将处于安全的一面。
$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

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

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

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