如何使用相对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工作,因为它预期?

       

网上收集的解决方案 "如何使用相对path在Webpack中使用SCSS(SASS)加载font-awesome?"

使用

 $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/

似乎没有任何方法可以使@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”},
         ]
     }

以下为我工作:

 $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' } 

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

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

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

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

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