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?