[v1.23.2] CSS files no longer being imported

[kbeverforden]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

All browsers

Describe the bug / error

I don't know if this is best practice but I "import" CSS files in the WebPart.ts file like this (see first line). These are common CSS files for fonts and styling things like h1, h2, etc. etc.

I upgraded to 1.23.2 and it no longer works. I have a @css alias set up in tsconfig.json and the webpack patch file. I'm not sure if that's related to the issue. I pasted that code below, as well. Is this a regression bug with all of the new CSS changes in the new release or is there a better way to do it? I tried changing require to import but that didn't work, either.

This code works fine in 1.23.0.

require('@css/common/workbench.css');

export default class FilingCalendarWebPart extends BaseClientSideWebPart<{}>
{
    protected async onInit(): Promise<void>
    {
        .................
    }

    public render(): void
    {
        ...............
    }    
}

tsconfig

 "paths": {          
            "@css/*": [
                "src/assets/css/*",
                "temp/sass-ts/assets/css/*"
            ]
        }

webpack patch file

const rootDir = path.resolve(__dirname, '..');
generatedConfiguration.resolve.alias['@css'] = path.resolve(rootDir, 'lib/assets/css/');

Steps to reproduce

Create a web part and try to use require to "import" a CSS file.

Expected behavior

CSS file should be loaded and applied to the page.

[Ashlesha-MSFT]

Hello @kbeverforden,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@kbeverforden
Thank you for reporting this issue. We've completed an investigation and can confirm this is a regression in v1.23.2. The breaking changes include a new ESLint rule that blocks require() for CSS imports, and a webpack configuration file location change that silently breaks existing setups. This has been escalated to the engineering team for resolution.

[kbeverforden]

Thank you. I have a custom eslint file and didn’t see the new rule. Normally I create a blank project after a new version and compare the changes but I forgot to do that this time.

[kbeverforden]

@Ashlesha-MSFT if this is a breaking change then you need to increase the major version number and provide guidance on how to mitigate it. There should never be breaking changes in a X.X.2 release.