Fix dev/prod CSS loader inconsistencies causing cascade ordering mismatches

[cstns]

Description

• Replaced all style-loader usage with MiniCssExtractPlugin.loader across all CSS/SCSS rules, ensuring identical CSS cascade and @layer ordering between development and production builds
• Added dev-mode–friendly output filenames ([name].js, [name].css, [name][ext]) so developers can still identify assets by name without content hashes
• Added watchOptions.ignored for frontend/dist/** and node_modules/** to prevent recompile cycles from writeToDisk: true

Note

Vendor CSS/SCSS (node_modules) keeps style-loader in dev because of a source map problem with MiniCssExtractPlugin. When all CSS goes through MiniCssExtractPlugin, it generates a single combined CSS source map covering every module that contributed to the output. Packages like @vuepic/vue-datepicker ship dist/main.css with a /*# sourceMappingURL=main.css.map */ reference — and that .map file points back to .scss source files that aren't even included in the published package. Those phantom paths end up in the combined source map as webpack:// URLs that browser DevTools can't resolve, producing errors on every page load and whenever a developer inspects styles.

Using style-loader for vendor CSS in dev keeps it out of the extracted CSS file entirely — the styles are injected as <style> tags via JS, so they never pollute the MiniCssExtractPlugin source map.

Related Issue(s)

closes #7303

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label