cssDest does not create the css or scss files

[n00bsaiboth]

Hello,

This is my first time, that I "create" an issue, so don't shoot me. Also this is more like a duplicate to this issue #72. I'm having difficulties with cssDest, it seems that it doesn't work or maybe I don't know how to use it. It doesn't create the _font.scss file and the autogenerated CSS goes into the style.css file.

Here is a part from my package.json file:

  "devDependencies": {
    "@babel/core": "^7.26.9",
    "@babel/preset-env": "^7.26.9",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.9.2",
    "sass": "^1.85.0",
    "sass-loader": "^16.0.5",
    "webfonts-loader": "^8.1.1",
    "webpack": "^5.98.0",
    "webpack-cli": "^6.0.1"
  }

Here is my iconfont.font.js file:

const path = require('path');

module.exports = {
    'files': [
        './src/icons/*.svg'
    ],
    'fontName': 'iconfont',
    'classPrefix': 'iconfont-',
    'baseSelector': '.iconfont',
    'types': ['eot', 'woff2', 'woff', 'ttf', 'svg'],
    'fileName': '[fontname].[ext]',
    'dest': '../../../src/fonts/iconfont/',
    // 'dest': path.resolve(__dirname, 'src/fonts'),
    'cssDest': '../../../src/scss/_fonts.scss'
};

Here is my webpack.config.js file:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    entry: './src/js/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'web/build/js'),
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.font\.js$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                        }
                    },
                    {
                        loader: 'webfonts-loader',
                        options: {
                            cssDest: '../../../src/scss/_fonts.scss'
                        }
                    }
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
                generator: {
                    filename: '../fonts/[name][ext]',
                } 
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/style.css',
        })
    ],
}

Here is my main.js file:

"use strict";

import '../scss/style.scss';

require('../../iconfont.font');

const helloWebpack = (name) => {
    console.log(`Hello from ${name}!`);
}

helloWebpack('Webpack and Babel');

I would be appreciated if anyone could help me out.

Cheers,

Jussi Jokinen