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

理查德：

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

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

在我的.js或.jsx文件（而不是我的样式表文件）中导入scss \ css font-awesome 文件：
```
导入'font-awesome / scss / font-awesome.scss';    
```
将此添加到我的webpack.config文件中：

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