chore: Replace deprecated node-sass with sass

[Steve-Mcl]

Description

• Replaces deprecated node-sass with sass package.
  • This includes a temp warning silence option in the webpack options (see Update sass imports to use/forward #6731 for follow up)
• Ensures scss is also minified in production
• Adds a common devMode flag derived from the standard webpack mode
  • argv.mode is webpack's canonical flag and enables built-in optimizations (minify, tree-shaking, etc.). process.env.mode is nonstandard!
• Realised som package size improvements by also minifying scss (this was not present before - see Package Size Improvements below)

Package Size Improvements = click to expand

node-sass 5.17MB

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.583fcf18c87fe7ca8684.js (3.07 MiB)
  setup.38cb289abfb8dfd43a28.js (2.92 MiB)
  async-vendors.547ee24a8eb91da02259.js (1.36 MiB)
  vendors.5d6d5db6e7c2a9766cc7.js (2.04 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (5.17 MiB)
      runtime.e899e5caab354dbd3481.js
      vendors.5d6d5db6e7c2a9766cc7.js
      main.a6810caea8fb6e05a2ad.css
      main.583fcf18c87fe7ca8684.js
  setup (5.01 MiB)
      runtime.e899e5caab354dbd3481.js
      vendors.5d6d5db6e7c2a9766cc7.js
      setup.a6810caea8fb6e05a2ad.css
      setup.38cb289abfb8dfd43a28.js

sass (without the sass compression) 5.21MB

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.589c2d734489236eee58.js (3.09 MiB)
  setup.39ed844758b1607affab.js (2.94 MiB)
  async-vendors.c7665d54f260de0c87a9.js (1.37 MiB)
  vendors.bfed5e0d479fb4edfdf7.js (2.05 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (5.21 MiB)
      runtime.d1a7034b38e034bfd138.js
      vendors.bfed5e0d479fb4edfdf7.js
      main.cc0652e8a6803c3e43ce.css
      main.589c2d734489236eee58.js
  setup (5.05 MiB)
      runtime.d1a7034b38e034bfd138.js
      vendors.bfed5e0d479fb4edfdf7.js
      setup.cc0652e8a6803c3e43ce.css
      setup.39ed844758b1607affab.js

sass (with sass compression) 4.58MB

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.5a1f0c1e9a2147e6f5dc.js (2.3 MiB)
  setup.27b0b588186956324404.js (2.23 MiB)
  async-vendors.5cfe81ffd883bb2ed292.js (1.37 MiB)
  vendors.aebe3adfe187e2b23180.js (2.05 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (4.58 MiB)
      runtime.b8ae3563a87680c76471.js
      vendors.aebe3adfe187e2b23180.js
      main.8282ea7659f6da1573ad.css
      main.5a1f0c1e9a2147e6f5dc.js
  setup (4.49 MiB)
      runtime.b8ae3563a87680c76471.js
      vendors.aebe3adfe187e2b23180.js
      setup.9e87ea320d2a06e85843.css
      setup.27b0b588186956324404.js

Webpack environment handling and loader configuration:

• Refactored config/webpack.config.js to use a devMode variable for environment detection, ensuring consistent behavior throughout the config. This changes how devtool is set and how loaders are selected.
• Updated CSS and SCSS loader configuration to use style-loader in development and MiniCssExtractPlugin.loader in production, improving build performance and hot-reloading in development. [1] [2]
• Changed the __VUE_PROD_DEVTOOLS__ definition to use the new devMode variable for clarity and consistency.

Sass configuration and dependency updates:

• Added sassOptions.silenceDeprecations to the sass-loader config to silence warnings about the deprecated @import syntax, reducing console noise during builds.
• Replaced the deprecated node-sass package with the recommended sass package in package.json for better compatibility and future support.

Related Issue(s)

closes #6730

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.65%. Comparing base (93ad7ee) to head (92a5a4d).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6761   +/-   ##
=======================================
  Coverage   76.65%   76.65%           
=======================================
  Files         398      398           
  Lines       20108    20108           
  Branches     4844     4844           
=======================================
  Hits        15414    15414           
  Misses       4694     4694           

Flag	Coverage Δ
backend	76.65% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Steve-Mcl]

@cstns

Odd test fail - wonder iff sass is throwing something off?

FlowFuse - Application - DevOps Pipelines
    ✓ can navigate to the /pipelines page with EE license (1309ms)
    ✓ can create pipelines containing stages (4610ms)
    1) can edit the instance assigned to a stage
    ✓ can push from one stage to another, creating a new snapshot (5489ms)
    ✓ can push from one stage to another, prompting for snapshot (5591ms)
    ✓ can push from one stage containing a device to an instance with use_active_snapshot (5564ms)
    ✓ cannot push to a device in development mode (4592ms)
    ✓ cannot select device group in the first stage of a pipeline (1595ms)
    ✓ can only add a device group stage after a device group (2927ms)
    ✓ can create a new device group (3935ms)
    ✓ can not push to a protected instance (7340ms)
    ✓ should hide the pipelines tab from users with viewer roles (425ms)
    ✓ should redirect viewer users to the instances overview when accessing the applications pipelines page (718ms)


  12 passing (53s)
  1 failing

  1) FlowFuse - Application - DevOps Pipelines
       can edit the instance assigned to a stage:
     CypressError: Timed out retrying after 4050ms: `cy.click()` failed because the center of this element is hidden from view:

`<button class="ff-btn transition-fade--color ff-btn--primary" type="submit" data-action="add-stage">...</button>`

I looked in pre-staging team plant-enterprise -> applications -> pipelines and it all looks normal!

[Steve-Mcl]

I looked in pre-staging team plant-enterprise -> applications -> pipelines and it all looks normal!

@cstns do you know how to view cypress screenshots to see what it was seeing?

[cstns]

taking a look at the test artifacts

[cstns]

The drop-down's last element is hidden from view due to the outer page scroll. Not sure if it's caused by the sass change though