web-dev-qa-db-ja.com

相対パスを使用してWebpackでSCSS（SASS）を使用してfont-awesomeを読み込むにはどうすればよいですか？

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するように指示し、そのファイルのフォルダをホームフォルダとして使用して、相対パスが期待どおりに機能するようにするにはどうすればよいですか？

node.jssassnpmfont-awesomewebpack
68
Richard

SCSS\SASSに独自の相対パスを持つファイルを@importする方法はないようです。

だから代わりに this を動作させることができた：

  • .jsまたは.jsxファイルにscss\css font-awesomeファイルをインポートします。notスタイルシートファイル：

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

  • これをwebpack.configファイルに追加します。

 module：
 {
ローダー：
 
 {test：/\.js?$/、loader： 'babel-loader？cacheDirectory '、exclude：/（node_modules | bower_components）/}、
 {test：/\.jsx?$/、loader：' babel-loader？cacheDirectory '、exclude：/（node_modules | bower_components）/}、 
 {テスト：/\.scss?$/、ローダー：['style'、 'css'、 'sass']}、
 {test：/\.svg(\?v=\d + \。\ d + \。\ d +）？$ /、ローダー： 'file-loader？mimetype = image/svg + xml'}、
 {test：/ \。woff（\？v =\d + \。\ d + \。\ d +）？$ /、ローダー： "file-loader？mimetype = application/font-woff"}、
 {test：/\.woff2(\?v=\d+ \。\ d + \。\ d +）？$ /、ローダー： "file-loader？mimetype = application/font-woff"}、
 {test：/ \。ttf（\？v =\d +\。\ d + \。\ d +）？$ /、ローダー： "file-loader？mimetype = application/octet-stream"}、
 {test：/ \。eot（\？v =\d + \。\d + \。\ d +）？$ /、loader： "file-loader"}、
 
}
27
Richard

つかいます

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

122
user137794

以下は私のために働いた：

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

これは、プロジェクトにfont-awesomeおよび必要なフォントをインポートすることです。 file-loaderを使用して必要なフォントをロードするためのその他の変更は、webpack構成にあります。

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

app.scssを変更して解決しました：

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

この方法は、外部の依存関係を変更せず、バージョン管理外に保つのに役立ちます。

12
Wilk

メインのscssファイルにパスを設定するだけで動作します。

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

私のために働いたのは、resolve-url-loaderを追加し、sourceMapsを有効にすることでした

私はすでにルート.scssファイルにfont-awesomeをインポートしました：

@import "~font-awesome/scss/font-awesome";
...

このルートファイルは、Webpackのエントリポイントとして定義されているmain.jsファイルにインポートされます。

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-277514138https://github.com/Rails/webpacker/issues/384#issuecomment-301318904

5
Excellence Ilesanmi

手順についてはangularサイトを参照してください Include Font Awesome

0
Vitaliy Markitanov

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';
0
Koudi