如何使用相对路径在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

使用

String html = "<javascript>blahblahblah</javascript>";
webView.loadData(html, "text/html", "UTF-8");
webView.getSettings().setJavaScriptEnabled(true);

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

中显示$fa-font-path变量的位置

font-awesome/scss/_variables.scss

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

Answer 2

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

所以我设法让this工作：

• 在我的.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', '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＆amp;项目中需要的字体。 webpack配置中的其他更改是使用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文件中设置路径并且它可以工作：

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

Answer 6

对我有用的是添加nx.all_simple_paths(G,source=0,target=5) 并启用resolve-url-loader

我已经在我的根sourceMaps文件中导入了真棒字体：

.scss

此根文件被导入到我的@import "~font-awesome/scss/font-awesome"; ... 文件中，该文件定义为Webpack的入口点：

main.js

然后我的最终webpack模块规则如下所示：

import './scss/main.scss';
...

注意：

我使用了 ... { 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

---

有用链接：

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

Answer 7

对于5.14版，以下内容适用于我：

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

Answer 8

v.4（symofony 4 + webpack）

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';

Answer 9

有关说明，请参见角度网站 Include Font Awesome

Answer 10

这就是它的工作方式，窍门是将$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