web-dev-qa-db-ja.com

Webpack 4：ビルドプロセスでフォントとそのスタイルシートを追加するためのcss-loader + file-loader

この設定を考えると：

fonts/styles.css

_@font-face {
  family: 'MyFont';
  src: url('fonts/myfont.otf');
}
_

どうやって：

  1. jSバンドルで、CSSファイルのURLへの参照を文字列として取得します。 _[name].[hash].css_
  2. 生成されたCSSファイルはプレーンなCSSファイルでなければなりませんが、生成されたWebフォントファイルを指すurl() sを使用しますか？

何かのようなもの：

_@font-face {
  family: 'MyFont';
  src: url('myfont.dds9394u329d9sa9r8439.otf');
}
_

私は試しています：

webpack.config.js

_{
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  loader: 'file-loader',
  include: [/fonts/]
},

{
  test: /\.css$/,
  use: ['file-loader', 'css-loader'],
  include: [/fonts/]
}
_

JSファイル

_const myfont = {
  family: 'MyFont',
  stylesheet: require('fonts/styles.css')
}
_

前の質問 のように、_file-loader_およびrequire()を使用すると、CSSのURLを取得できますが、生成されたファイルは単純なCSSではありません。

_file-loader_と_css-loader_（+おそらく他のローダー）を組み合わせてこのCSSファイルを取得するにはどうすればよいですか？

ありがとう！

追伸CSS /フォントファイルをハッシュしてコードでアドレス指定できるようにしたいので、これについて_copy-webpack-plugin_を避けたいです。

webpackcss-loaderwebpack-file-loader
9
Dan Burzo

後世のために：これは私が探していた結果を得ることができたWebpack構成です。

module: {
  rules: {
    // Font stylesheets
    {
      test: /\.css$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'css/[hash].[ext]'
          }
        },
        'extract-loader',
        'css-loader',
        'postcss-loader'
      ],
      include: [/fonts/]
    },

    // Font files
    {
      test: /\.(woff|woff2|ttf|otf)$/,
      loader: 'file-loader',
      include: [/fonts/],

      options: {
        name: '[hash].[ext]',
        outputPath: 'css/',
        publicPath: url => '../css/' + url
      }
    },
  }
}
6
Dan Burzo

この質問が出されてからしばらく経ちましたが、ダンと同じように私は後世のためにこれを残します。

したがって、これは私の場合に機能する設定です：

const path = require("path");

module.exports = (env, argv) => ({
  ...
  module: {
       rules: [
       {
         test: /\.css$/,
         use: ["style-loader", {loader: "css-loader", options: {modules: true}}],
         exclude: /node_modules/,
      },        
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader', 
            options: {
              outputPath: (url, resourcePath, context) => {
                if(argv.mode === 'development') {
                  const relativePath = path.relative(context, resourcePath);
                  return `/${relativePath}`;
                }
                return `/assets/fonts/${path.basename(resourcePath)}`;
              }
            }
          }
        ]
      }]
    }
});

完全な動作設定はここにあります： https://github.com/przemek-nowicki/multi-page-app-with-react/blob/master/webpack.config.js

1
Przemek Nowicki