Using iconfont-webpack-plugin with Laravel Mix

Viewed 90

I'm new to webpack and trying to add a custom icon font builder to a Laravel project. The iconfont library is available at iconfont-webpack-plugin, and added to webpack.config.js as follows:

const IconfontWebpackPlugin = require('iconfont-webpack-plugin');

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'postcss-loader',
            postcssOptions: (loader) => {
              return {
                plugins: [
                  new IconfontWebpackPlugin({
                    resolve: loader.resolve,
                    fontNamePrefix: 'custom-',
                    enforcedSvgHeight: 3000,
                  })
                ]
              };
            }
          }
        ]
      }
    ]
  }

In Laravel Mix I'm using the mix.webpackConfig() function as follows:

const IconfontWebpackPlugin = require('iconfont-webpack-plugin');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        postcssOptions: (loader) => {
                            return {
                                plugins: [
                                    new IconfontWebpackPlugin({
                                        resolve: loader.resolve,
                                        fontNamePrefix: 'custom-',
                                        enforcedSvgHeight: 3000,
                                    })
                                ]
                            };
                        }
                    }
                ]
            }
        ]
    }
});

This is giving a build error:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[12].use[1] has an unknown property 'postcssOptions'. These properties are valid:
   object { ident?, loader?, options? }

What is the correct way to do this in Laravel Mix?

0 Answers
Related