Webpack 4 css-loader cannot resolve font

Question

Webpack/css-loader is throwing the error:

ERROR in ./src/styles/global.css (./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib!./src/styles/global.css)
[React]     Module not found: Error: Can't resolve 'expert-sans-light.woff' in '/Users/MyUser/git/as3_UI/React/src/styles'

This is the webpack config:

{
  entry: { app: APP_DIR + '/index.js' },
  output: {
    path: BUILD_DIR,
    filename: 'assets/app/app.js',
    chunkFilename: 'assets/app/[name].bundle.js',
    publicPath: '/ecom/as2/UI/'
  },
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      path: BUILD_DIR,
      filename: 'assets/css/[name].css',
      chunkFilename: 'assets/css/[name].bundle.css'
    }),
    new CopyWebpackPlugin([{ from: 'src/index.html' }])
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpg)$/,
        use: 'url-loader?limit=100000&name=/fonts/[name].[ext]'
      },
      {
        test: /\.woff$/,
        use:
          'url-loader?mimetype=application/font-woff&name=/fonts/[name].[ext]'
      },
      {
        test: /\.svg$/,
        use: 'url-loader?mimetype=image/svg+xml&name=/fonts/[name].[ext]'
      },
      {
        test: /\.ttf/,
        use: 'url-loader?mimetype=application/font-ttf&name=/fonts/[name].[ext]'
      },
      {
        test: /\.woff2$/,
        use:
          'url-loader?mimetype=application/font-woff2&name=/fonts/[name].[ext]'
      },
      {
        test: /\.[ot]tf$/,
        use:
          'url-loader?mimetype=application/octet-stream&name=/fonts/[name].[ext]'
      },
      {
        test: /\.eot$/,
        use:
          'url-loader?mimetype=application/vnd.ms-fontobject&name=/fonts/[name].[ext]'
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]__[name]__[local]',
              sourceMap: true
            }
          },
          { loader: 'postcss-loader' }
        ]
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx', '.css', '.less']
  },
  // optimization
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          // name of the chunk
          name: 'vendor',
          // async + async chunks
          chunks: 'all',
          // import file path containing node_modules
          test: /node_modules/,
          // priority
          priority: 20
        },
        // common chunk
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'async',
          priority: 10,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  }
};

All the threads I've seen on this point to using url-loader to fix this issue, but that's already in the webpack config. I'm not sure why css-loader cannot find the font file that is right next to the css file

Webpack 4 css-loader cannot resolve font

Answers (1)

Related Questions