custom.css - classes different on build and serve

[derkoe]

I've tried the new custom.css feature and have struggled with it.

It seems that when running a build the class names are generated differently - for example container__Layout_** when running with npm serve becomes Layout_container when building the application.

As a workaround I have added both styles in my custom.css:

[class^="container__Layout"],
[class^="Layout_container"] {
    background-color: #004985;
}

Maybe you can find a way around this with css-modules.

[mathiasschopmans]

This is a known issue and addressed in the README: https://github.com/AOEpeople/aoe_technology_radar?tab=readme-ov-file#advanced-styling-with-customcss

Maybe we should additionally add "static" classNames.

[derkoe]

In your docs you mention only on of this variants [class^="container__Layout"] - this works for npm serve but you will also have to have a rule [class^="Layout_container"] because the class changes when building

[mathiasschopmans]

Ah, now I got the issue. 💡

There seems to be a inconsistency between Next.js Turbo (used for development) and Webpacks (still used by next.js to build) localIdentName property. ☹️

Turbopack currently only supports next dev and does not support next build.

I'm trying to figure out, if this can be normalized. Otherwise we may stick to Webpack for the dev-server and abandon Next.js' Turbo for now.

[mathiasschopmans]

I switched from Next.js Turbo Builder to good old Webpack for development. This also solves a hot-loading issue. Will be released with v4.2.0 in the next minutes and hopefully fixes your issue. :)

[derkoe]

thx @mathiasschopmans !!!!