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

使用する

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

チルダ「〜」は、webpackメカニズムを使用してsass-loaderによって補間されます。

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

代わりに、これを機能させることができました。

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

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

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

    モジュール：
    {{
        ローダー：
        [
            {テスト：/ \。js？$ /、ローダー： 'babel-loader？cacheDirectory'、除外：/（node_modules | bower_components）/}、
            {テスト：/ \。jsx？$ /、ローダー： 'babel-loader？cacheDirectory'、除外：/（node_modules | bower_components）/}、
            {テスト：/ \。scss？$ /、ローダー：['style-loader'、 'css-loader'、 'sass-loader']}、         
            {テスト：/ \。svg（\？v = \ d + \。\ d + \。\ d +）？$ /、ローダー： 'file-loader？mimetype = image / svg + xml'}、
            {テスト：/ \。woff（\？v = \ d + \。\ d + \。\ d +）？$ /、ローダー： "file-loader？mimetype = application / font-woff"}、
            {テスト：/ \。woff2（\？v = \ d + \。\ d + \。\ d +）？$ /、ローダー： "file-loader？mimetype = application / font-woff"}、
            {テスト：/ \。ttf（\？v = \ d + \。\ d + \。\ d +）？$ /、ローダー： "file-loader？mimetype = application / octet-stream"}、
            {テスト：/ \。eot（\？v = \ d + \。\ d + \。\ d +）？$ /、ローダー： "ファイルローダー"}、
        ]
    }

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

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

これはfont-awesome、プロジェクトに＆必要なフォントをインポートするためのものです。その他の変更は、をwebpack使用して必要なフォントをロードするための構成です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ファイルにパスを設定するだけで機能します：

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

これは私にとってそれがどのように機能したかです、トリックは$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

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

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

@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-loaderfile-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

バージョン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";

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