如何使用相对路径在Webpack中使用SCSS（SASS）加载超棒的字体？

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

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

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

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

因为font-awesome.scss文件引用了相对路径'../fonts/'。

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

使用

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

在哪里$fa-font-path看到变量font-awesome/scss/_variables.scss

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

波浪号“〜”由sass-loader使用webpack机制进行插值。

在SCSS \ SASS中似乎没有任何方法可以@import具有自己的相对路径的文件。

所以不是我设法得到这个工作：

• 在我的.js或.jsx文件（而不是样式表文件）中导入scss \ css font-awesome文件：

  导入'font-awesome / scss / font-awesome.scss';    

• 将此添加到我的webpack.config文件中：

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

以下对我有用：

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

这是font-awesome在项目中导入＆必需的字体。其他变化是webpack配置，以使用加载所需的字体file-loader。

{
  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';

这就是它的工作方式，技巧是$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在我的情况下，请检查您的字体文件夹@fortawesome/fontawesome-free

对我有用的是添加resolve-url-loader并启用sourceMaps

我已经在我的根.scss文件中导入了font-awesome ：

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

这个根文件被导入到我main.js定义为Webpack入口点的文件中：

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

然后我的最终webpack模块规则如下所示：

 ...
 {
    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]', },
  }
  ...

注意：

我使用mini-css-extract-plugin，可以这样注册：

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

url-loader需要file-loader安装，因此如果出现类似的错误cannot find module file-loader，则只需安装：

npm i -D file-loader

有用的链接：

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

对于5.14版，以下内容适用于我：

$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";

v.4（symofony 4 + webpack）

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';