I would like to generate an extra/additional CSS file with fix path, so I can use that within a rich text editor in a CMS.
Nextjs by default generates layout and pages CSS files like this: _next/static/css/1797f0ce02987c89.css and that is fine, but additionally I need to create an rte.css file like /a/fix/path/rte.css

I’m using Sass and I have a src/styles/style.scss file, which import multiple sass files like _variables.sccs or _type.scss.

My next.config.js file is:

/** @type {import('next').NextConfig} */

const withNextIntl = require('next-intl/plugin')(
    './i18n.ts'
);

const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
})

const nextConfig = {
    compiler: {
        removeConsole: process.env.NODE_ENV === 'production' ? true: false
    },
    experimental: {
        webpackBuildWorker: true
    },
    webpack(config) {
        // Grab the existing rule that handles SVG imports
        const fileLoaderRule = config.module.rules.find(
            (rule) => rule.test && rule.test.test?.('.svg')
        );
    
        config.module.rules.push(
            // Reapply the existing rule, but only for svg imports ending in ?url
            {
                ...fileLoaderRule,
                test: /.svg$/i,
                resourceQuery: /url/, // *.svg?url
            },
            // Convert all other *.svg imports to React components
            {
                test: /.svg$/i,
                issuer: /.[jt]sx?$/,
                resourceQuery: { not: /url/ }, // exclude if *.svg?url
                use: ['@svgr/webpack']
            }
        )
    
        // Modify the file loader rule to ignore *.svg, since we have it handled now.
        if (fileLoaderRule) {
            // Modify the file loader rule to ignore *.svg, since we have it handled now.
            fileLoaderRule.exclude = /.svg$/i;
        }
    
        return config
    }
}

module.exports = withNextIntl(withBundleAnalyzer(nextConfig));