Version 4.x does not support scss

[aleksolutions]

Hi, when I try to use .scss in the manifest in v4.x (tried in both 4.0.0 and 4.1.0) the compiler shows an error: rendering chunks (4)...[webExtension] Failed to find chunk info for src/entries/contentScript/primary/main.tsx

Also, when I try to use both tailwind and scss at the same time in v3.1.1 only the css from tailwind is added in the output manifest, but all css files are bundled correctly inside output folder.

vite version: 4.2.1

As always it works fine in dev mode.

Snippet:

const sharedManifest = {
  content_scripts: [
    {
      js: ['src/entries/contentScript/primary/main.tsx'],
      css: ['src/entries/contentScript/primary/main.scss'],
      matches: ['https://*.example.net/*', 'https://*.example.com/*'],
      run_at: 'document_start',
      all_frames: true
    }
  ],
  icons: {
    16: 'icons/icon.png',
    48: 'icons/icon.png',
    128: 'icons/icon.png'
  },
  permissions: ['webNavigation', 'storage'] as chrome.runtime.ManifestPermissions[]
}

[samrum]

This seems to be because the files have the same name. There was a hack in in v3 for css that would have made it work there.

A quick fix would be to rename main.scss to styles.scss or something other than main. I can look into adding something similar to that hack back.

Could you post a snippet(s) for the tailwind issue? Does it happen in v4 as well?

[aleksolutions]

Thank you samrum, that's it, changing the scss file name do the trick. It seems that in v4.x scss and tailwind work fine together.

In dev mode the following message appears when I use scss but everything works fine:

vite-plugin-transform-css-modules doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

[aleksolutions]

forget the last error, it seems that I had that package imported in my dev dependencies (don't know why). Removing it clears the error.