如何使用相对path在Webpack中使用SCSS（SASS）加载font-awesome？

我有我的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文件引用相对path“../fonts/”。

我怎样才能告诉scss \ webpack到@import另一个文件，并使用该文件的文件夹作为主文件夹，使其相对path工作，因为它预期？

Answer 1

使用

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

其中$fa-font-pathvariables在font-awesome/scss/_variables.scss

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

如上所述： http : //fontawesome.io/get-started/

Answer 2

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

所以相反，我设法得到这个工作：

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

    import'font-awesome / scss / font-awesome.scss'; 

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

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

Answer 3

以下为我工作：

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

这是在项目中导入font-awesome ＆所需的字体。 其他更改是在webpackconfiguration中，使用file-loader加载所需的字体。

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

Answer 4

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

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

这种方式有助于保持外部依赖性不变和未版本化。

Answer 5

我只是在我的主scss文件中设置path，它的工作原理：

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