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

Question

我的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另一个文件，并使用该文件的文件夹作为主文件夹，以便其相对路径按预期工作？

Answer 1

在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 +）？$ /，加载程序：“文件加载程序”}，
      ]
  }