如何使用相对路径在Webpack中使用SCSS(SASS)加载font-awesome？

Question

我的node_modules文件夹中有font-awesome,所以我尝试在我的主.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

使用

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

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

Answer 2

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

所以我设法让这个工作:

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

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

• 将其添加到我的webpack.config文件中:

    module:
    {
        loaders:
        [
            {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},         
            {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在项目中导入&required字体.其他更改是在webpack配置中,使用加载所需的字体file-loader.

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

Answer 4

这就是它对我的工作方式，诀窍是设置$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

Answer 5

通过改变我的解决方案app.scss:

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

这种方式对于保持外部依赖关系不变和无版本非常有用.

Answer 6

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

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

Answer 7

对我有用的是添加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