Skip to content

chore: Replace deprecated node-sass with sass#6761

Merged
cstns merged 12 commits intomainfrom
6729-sass
Mar 6, 2026
Merged

chore: Replace deprecated node-sass with sass#6761
cstns merged 12 commits intomainfrom
6729-sass

Conversation

@Steve-Mcl
Copy link
Copy Markdown
Contributor

@Steve-Mcl Steve-Mcl commented Feb 24, 2026

Description

  • Replaces deprecated node-sass with sass package.
  • 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

@Steve-Mcl Steve-Mcl requested a review from cstns February 24, 2026 13:13
@Steve-Mcl Steve-Mcl changed the title 6729 sass chore: Replace deprecated node-sass with sass Feb 24, 2026
@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 24, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.60%. Comparing base (83bcae4) to head (a6a3e36).
⚠️ Report is 15 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6761   +/-   ##
=======================================
  Coverage   76.60%   76.60%           
=======================================
  Files         398      398           
  Lines       20122    20122           
  Branches     4844     4844           
=======================================
  Hits        15414    15414           
  Misses       4708     4708           
Flag Coverage Δ
backend 76.60% <ø> (ø)

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
Copy link
Copy Markdown
Contributor Author

Steve-Mcl commented Feb 24, 2026

@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
Copy link
Copy Markdown
Contributor Author

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
Copy link
Copy Markdown
Contributor

cstns commented Feb 24, 2026

taking a look at the test artifacts

@cstns
Copy link
Copy Markdown
Contributor

cstns commented Feb 24, 2026

FlowFuse - Application - DevOps Pipelines -- can edit the instance assigned to a stage (failed)

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

Comment thread package-lock.json Fixed
@Steve-Mcl
Copy link
Copy Markdown
Contributor Author

FlowFuse - Application - DevOps Pipelines -- can edit the instance assigned to a stage (failed) 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

I think this is a test time issue

Same window size locally (both in chrome and in cypress the collision detect works normally causing menu to render upwards)
image

@Steve-Mcl
Copy link
Copy Markdown
Contributor Author

@cstns - it was the dropdown covering the button & not being dismissed with a click inside or outside.

Still think this is an issue with the CI env - but this fixes the test fail for now.

Ready for review 👊

Copy link
Copy Markdown
Contributor

@cstns cstns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! tested locally, builds look good and so do build times. Nothing caught my eye in the UI. Only used node v20 but we should be ok moving forward.

We'd need a follow-up to properly handle the scss import warnings, other than that, very nice job!

@Steve-Mcl
Copy link
Copy Markdown
Contributor Author

@cstns before I merge, just checking, did it have any impact on your setup (like hot reload?)

And did you notice a build size reduction?

@cstns
Copy link
Copy Markdown
Contributor

cstns commented Mar 6, 2026

Yes, i checked both hot reloading and prod builds didn't notice any diffs in aesthetics in the app.

had a glance on sizes and nothing stood out, will post difs in a moment

@cstns
Copy link
Copy Markdown
Contributor

cstns commented Mar 6, 2026

Sass Build Logs
> @flowfuse/flowfuse@2.27.1 build
> webpack --mode=production -c ./config/webpack.config.js

Failed to load ./.env.

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
assets by status 8.94 MiB [emitted]
  assets by info 8.92 MiB [immutable] 23 assets
  assets by status 2.03 KiB [compared for emit]
    asset ../index.html 1.07 KiB [emitted] [compared for emit]
    asset ../../dist-setup/setup.html 983 bytes [emitted] [compared for emit]
  asset favicon.ico 15 KiB [emitted]
assets by path ../*.png 20.8 KiB
  asset ../ff-logo--wordmark--light.png 10 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.png] [copied]
  asset ../ff-logo--wordmark--dark.png 9.97 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--dark.png] [copied]
  asset ../favicon-32x32.png 524 bytes [compared for emit] [from: frontend/public/favicon-32x32.png] [copied]
  asset ../favicon-16x16.png 341 bytes [compared for emit] [from: frontend/public/favicon-16x16.png] [copied]
assets by path ../*.svg 10.2 KiB
  asset ../ff-logo--wordmark--light.svg 8.79 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.svg] [copied]
  asset ../ff-minimal-red.svg 1.41 KiB [compared for emit] [from: frontend/public/ff-minimal-red.svg] [copied]
asset ../favicon.ico 15 KiB [compared for emit] [from: frontend/public/favicon.ico] [copied]
Entrypoint main [big] 4.57 MiB (14.6 MiB) = runtime.842c732cb88f3f5c98ff.js 3.82 KiB vendors.8d2e66fb646f32d0a91c.js 2.03 MiB main.89cf6c72519c17b59c22.css 234 KiB main.2741349aecbd66ba2aac.js 2.3 MiB 16 auxiliary assets
Entrypoint setup [big] 4.47 MiB (14.4 MiB) = runtime.842c732cb88f3f5c98ff.js 3.82 KiB vendors.8d2e66fb646f32d0a91c.js 2.03 MiB setup.a0b9875bd211729feaee.css 214 KiB setup.1ef000b6c8a663c4bb4e.js 2.22 MiB 16 auxiliary assets
orphan modules 12.4 MiB (javascript) 176 KiB (asset) 10.9 KiB (runtime) [orphan] 5058 modules
runtime modules 164 KiB 655 modules
built modules 11.5 MiB (javascript) 255 KiB (css/mini-extract) 336 KiB (asset) [built]
  modules by path ./node_modules/ 7.29 MiB (javascript) 2.12 KiB (css/mini-extract) 785 modules
  modules by path ./frontend/src/ 252 KiB (css/mini-extract) 4.18 MiB (javascript) 336 KiB (asset)
    css modules 252 KiB 170 modules
    modules by layer 4.18 MiB (javascript) 336 KiB (asset) 98 modules
  modules by path ./forge/lib/*.js 22.1 KiB
    ./forge/lib/permissions.js 16.7 KiB [built] [code generated]
    ./forge/lib/roles.js 599 bytes [built] [code generated]
    ./forge/lib/templates.js 2.99 KiB [built] [code generated]
    ./forge/lib/features.js 1.5 KiB [built] [code generated]
    ./forge/lib/builtInModules.js 271 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.2741349aecbd66ba2aac.js (2.3 MiB)
  setup.1ef000b6c8a663c4bb4e.js (2.22 MiB)
  async-vendors.2a7dcb06438b5c8863b7.js (1.36 MiB)
  vendors.8d2e66fb646f32d0a91c.js (2.03 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.57 MiB)
      runtime.842c732cb88f3f5c98ff.js
      vendors.8d2e66fb646f32d0a91c.js
      main.89cf6c72519c17b59c22.css
      main.2741349aecbd66ba2aac.js
  setup (4.47 MiB)
      runtime.842c732cb88f3f5c98ff.js
      vendors.8d2e66fb646f32d0a91c.js
      setup.a0b9875bd211729feaee.css
      setup.1ef000b6c8a663c4bb4e.js


webpack 5.105.0 compiled with 2 warnings in 25374 ms
Sass HMR Logs
> @flowfuse/flowfuse@2.27.1 web
> cross-env NODE_RUN_HOT=hot webpack serve --mode=development --config ./config/webpack.config.js

Failed to load ./.env.
<i> [webpack-dev-server] [HPM] Proxy created: /api/v1,/account/,/storage,/ee/billing  -> http://localhost:3000
<i> [webpack-dev-server] [HPM] Proxy created: /api  -> https://registry.npmjs.com
<i> [webpack-dev-server] [HPM] Proxy rewrite rule created: "^/api" ~> ""
<i> [webpack-dev-server] [HPM] Proxy created: /api/**/projects/**/resources/stream,/api/**/devices/**/editor/proxy/comms  -> ws://localhost:3000
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.77:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/cstns/Workspace/FlowFuse/dev-env/packages/flowfuse/frontend/dist' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
assets by status 32.7 MiB [emitted]
  assets by chunk 567 KiB (auxiliary name: main) 15 assets
  assets by path *.js 32.1 MiB 6 assets
  assets by path ../ 1.97 KiB
    asset ../index.html 1.04 KiB [emitted]
    asset ../../dist-setup/setup.html 950 bytes [emitted]
  asset favicon.ico 15 KiB [emitted]
assets by status 46.1 KiB [compared for emit]
  assets by path ../*.png 20.8 KiB
    asset ../ff-logo--wordmark--light.png 10 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.png] [copied]
    + 3 assets
  assets by path ../*.svg 10.2 KiB
    asset ../ff-logo--wordmark--light.svg 8.79 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.svg] [copied]
    asset ../ff-minimal-red.svg 1.41 KiB [compared for emit] [from: frontend/public/ff-minimal-red.svg] [copied]
  asset ../favicon.ico 15 KiB [compared for emit] [from: frontend/public/favicon.ico] [copied]
Entrypoint main 19.1 MiB (17 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB main.js 11.8 MiB 18 auxiliary assets
Entrypoint setup 18.4 MiB (16.3 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB setup.js 11.1 MiB 18 auxiliary assets
orphan modules 4.67 MiB [orphan] 1328 modules
runtime modules 33.1 KiB 19 modules
modules by path ./frontend/src/ 6.38 MiB (javascript) 512 KiB (asset) 3075 modules
modules by path ./node_modules/ 7.5 MiB 1502 modules
modules by path ./forge/lib/*.js 22.1 KiB
  ./forge/lib/permissions.js 16.7 KiB [built] [code generated]
  ./forge/lib/roles.js 599 bytes [built] [code generated]
  ./forge/lib/templates.js 2.99 KiB [built] [code generated]
  ./forge/lib/features.js 1.5 KiB [built] [code generated]
  ./forge/lib/builtInModules.js 271 bytes [built] [code generated]
modules by mime type image/svg+xml 364 bytes
  data:image/svg+xml,%3csvg viewBox=%.. 181 bytes [built] [code generated]
  data:image/svg+xml,%3csvg viewBox=%.. 183 bytes [built] [code generated]
webpack 5.105.0 compiled successfully in 12145 ms
assets by status 9.75 MiB [cached] 28 assets
assets by status 23.2 MiB [emitted]
  assets by info 203 KiB [immutable]
    asset setup.0e70846499f0a9b4f71e.hot-update.js 101 KiB [emitted] [immutable] [hmr] (name: setup) 1 related asset
    asset main.0e70846499f0a9b4f71e.hot-update.js 101 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
    asset runtime.0e70846499f0a9b4f71e.hot-update.js 388 bytes [emitted] [immutable] [hmr] (name: runtime) 1 related asset
    asset runtime.0e70846499f0a9b4f71e.hot-update.json 46 bytes [emitted] [immutable] [hmr]
  asset main.js 11.8 MiB [emitted] (name: main) 1 related asset
  asset setup.js 11.1 MiB [emitted] (name: setup) 1 related asset
  asset runtime.js 49.5 KiB [emitted] (name: runtime) 1 related asset
Entrypoint main 19.2 MiB (16.9 MiB) = runtime.js 49.5 KiB runtime.0e70846499f0a9b4f71e.hot-update.js 388 bytes vendors.js 7.25 MiB main.js 11.8 MiB main.0e70846499f0a9b4f71e.hot-update.js 101 KiB 20 auxiliary assets
Entrypoint setup 18.5 MiB (16.5 MiB) = runtime.js 49.5 KiB runtime.0e70846499f0a9b4f71e.hot-update.js 388 bytes vendors.js 7.25 MiB setup.js 11.1 MiB setup.0e70846499f0a9b4f71e.hot-update.js 101 KiB 20 auxiliary assets
cached modules 18.5 MiB (javascript) 512 KiB (asset) [cached] 5910 modules
runtime modules 33.1 KiB 19 modules
javascript modules 99.8 KiB
  ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-2.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-2.use[2]!./frontend/src/index.css 99.6 KiB [built] [code generated]
  ./frontend/src/images/lottie/immersive-editor-loading-states/ sync ...(truncated) 241 bytes [optional] [built]
webpack 5.105.0 compiled successfully in 1309 ms
assets by status 32.7 MiB [cached] 31 assets
Entrypoint main 19.1 MiB (16.8 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB main.js 11.8 MiB 18 auxiliary assets
Entrypoint setup 18.4 MiB (16.3 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB setup.js 11.1 MiB 18 auxiliary assets
cached modules 18.6 MiB (javascript) 512 KiB (asset) 33.1 KiB (runtime) [cached] 5931 modules
webpack 5.105.0 compiled successfully in 519 ms
Node-Sass Build Logs
> @flowfuse/flowfuse@2.27.1 build
> webpack --mode=production -c ./config/webpack.config.js

Failed to load ./.env.

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
assets by status 10.2 MiB [emitted]
  assets by info 10.1 MiB [immutable] 23 assets
  assets by path ../ 2.03 KiB
    asset ../index.html 1.07 KiB [emitted]
    asset ../../dist-setup/setup.html 983 bytes [emitted]
  asset favicon.ico 15 KiB [emitted]
assets by status 46.1 KiB [compared for emit]
  assets by path ../*.png 20.8 KiB
    asset ../ff-logo--wordmark--light.png 10 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.png] [copied]
    asset ../ff-logo--wordmark--dark.png 9.97 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--dark.png] [copied]
    + 2 assets
  assets by path ../*.svg 10.2 KiB
    asset ../ff-logo--wordmark--light.svg 8.79 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.svg] [copied]
    asset ../ff-minimal-red.svg 1.41 KiB [compared for emit] [from: frontend/public/ff-minimal-red.svg] [copied]
  asset ../favicon.ico 15 KiB [compared for emit] [from: frontend/public/favicon.ico] [copied]
Entrypoint main [big] 5.21 MiB (15.8 MiB) = runtime.7fd86f1e86950d6d2685.js 3.89 KiB vendors.7600496c42b284ae5edd.js 2.04 MiB main.6dce9fae03d0dce9e3ec.css 58.6 KiB main.d1b0aea8a055328e2a3b.js 3.11 MiB 19 auxiliary assets
Entrypoint setup [big] 5.06 MiB (15.5 MiB) = runtime.7fd86f1e86950d6d2685.js 3.89 KiB vendors.7600496c42b284ae5edd.js 2.04 MiB setup.6dce9fae03d0dce9e3ec.css 58.6 KiB setup.b0be0e1935a61201f363.js 2.96 MiB 19 auxiliary assets
orphan modules 11.9 MiB (javascript) 1.95 KiB (runtime) [orphan] 4861 modules
runtime modules 14.2 KiB 37 modules
built modules 12.8 MiB (javascript) 512 KiB (asset) 58.6 KiB (css/mini-extract) [built]
  modules by path ./node_modules/ 7.3 MiB 786 modules
  modules by path ./frontend/src/ 5.44 MiB (javascript) 512 KiB (asset) 58.6 KiB (css/mini-extract) 272 modules
  modules by path ./forge/lib/*.js 22.1 KiB
    ./forge/lib/permissions.js 16.7 KiB [built] [code generated]
    ./forge/lib/roles.js 599 bytes [built] [code generated]
    ./forge/lib/templates.js 2.99 KiB [built] [code generated]
    + 2 modules
  modules by mime type image/svg+xml 364 bytes
    data:image/svg+xml,%3csvg viewBox=%.. 181 bytes [built] [code generated]
    data:image/svg+xml,%3csvg viewBox=%.. 183 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.d1b0aea8a055328e2a3b.js (3.11 MiB)
  setup.b0be0e1935a61201f363.js (2.96 MiB)
  async-vendors.f9080708d204ce72635e.js (1.36 MiB)
  vendors.7600496c42b284ae5edd.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.21 MiB)
      runtime.7fd86f1e86950d6d2685.js
      vendors.7600496c42b284ae5edd.js
      main.6dce9fae03d0dce9e3ec.css
      main.d1b0aea8a055328e2a3b.js
  setup (5.06 MiB)
      runtime.7fd86f1e86950d6d2685.js
      vendors.7600496c42b284ae5edd.js
      setup.6dce9fae03d0dce9e3ec.css
      setup.b0be0e1935a61201f363.js


webpack 5.105.0 compiled with 2 warnings in 38485 ms
Node-Sass HMR Logs
> @flowfuse/flowfuse@2.27.1 web
> cross-env NODE_RUN_HOT=hot webpack serve --mode=development --config ./config/webpack.config.js

Failed to load ./.env.
<i> [webpack-dev-server] [HPM] Proxy created: /api/v1,/account/,/storage,/ee/billing  -> http://localhost:3000
<i> [webpack-dev-server] [HPM] Proxy created: /api  -> https://registry.npmjs.com
<i> [webpack-dev-server] [HPM] Proxy rewrite rule created: "^/api" ~> ""
<i> [webpack-dev-server] [HPM] Proxy created: /api/**/projects/**/resources/stream,/api/**/devices/**/editor/proxy/comms  -> ws://localhost:3000
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.77:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/cstns/Workspace/FlowFuse/dev-env/packages/flowfuse/frontend/dist' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
assets by status 32.8 MiB [emitted]
  assets by chunk 567 KiB (auxiliary name: main) 15 assets
  assets by path *.js 32.3 MiB 6 assets
  assets by path ../ 1.97 KiB
    asset ../index.html 1.04 KiB [emitted]
    asset ../../dist-setup/setup.html 950 bytes [emitted]
  asset favicon.ico 15 KiB [emitted]
assets by status 46.1 KiB [compared for emit]
  assets by path ../*.png 20.8 KiB
    asset ../ff-logo--wordmark--light.png 10 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.png] [copied]
    + 3 assets
  assets by path ../*.svg 10.2 KiB
    asset ../ff-logo--wordmark--light.svg 8.79 KiB [compared for emit] [from: frontend/public/ff-logo--wordmark--light.svg] [copied]
    asset ../ff-minimal-red.svg 1.41 KiB [compared for emit] [from: frontend/public/ff-minimal-red.svg] [copied]
  asset ../favicon.ico 15 KiB [compared for emit] [from: frontend/public/favicon.ico] [copied]
Entrypoint main 19.1 MiB (17.1 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB main.js 11.9 MiB 18 auxiliary assets
Entrypoint setup 18.5 MiB (16.4 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB setup.js 11.2 MiB 18 auxiliary assets
orphan modules 4.67 MiB [orphan] 1328 modules
runtime modules 33.1 KiB 19 modules
modules by path ./frontend/src/ 6.44 MiB (javascript) 512 KiB (asset) 3088 modules
modules by path ./node_modules/ 7.5 MiB 1502 modules
modules by path ./forge/lib/*.js 22.1 KiB
  ./forge/lib/permissions.js 16.7 KiB [built] [code generated]
  ./forge/lib/roles.js 599 bytes [built] [code generated]
  ./forge/lib/templates.js 2.99 KiB [built] [code generated]
  ./forge/lib/features.js 1.5 KiB [built] [code generated]
  ./forge/lib/builtInModules.js 271 bytes [built] [code generated]
modules by mime type image/svg+xml 364 bytes
  data:image/svg+xml,%3csvg viewBox=%.. 181 bytes [built] [code generated]
  data:image/svg+xml,%3csvg viewBox=%.. 183 bytes [built] [code generated]
webpack 5.105.0 compiled successfully in 11963 ms
assets by status 9.75 MiB [cached] 28 assets
assets by status 23.3 MiB [emitted]
  assets by info 203 KiB [immutable]
    asset setup.35e54b24a79f70809c7d.hot-update.js 101 KiB [emitted] [immutable] [hmr] (name: setup) 1 related asset
    asset main.35e54b24a79f70809c7d.hot-update.js 101 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
    asset runtime.35e54b24a79f70809c7d.hot-update.js 388 bytes [emitted] [immutable] [hmr] (name: runtime) 1 related asset
    asset runtime.35e54b24a79f70809c7d.hot-update.json 46 bytes [emitted] [immutable] [hmr]
  asset main.js 11.9 MiB [emitted] (name: main) 1 related asset
  asset setup.js 11.2 MiB [emitted] (name: setup) 1 related asset
  asset runtime.js 49.5 KiB [emitted] (name: runtime) 1 related asset
Entrypoint main 19.2 MiB (17 MiB) = runtime.js 49.5 KiB runtime.35e54b24a79f70809c7d.hot-update.js 388 bytes vendors.js 7.25 MiB main.js 11.9 MiB main.35e54b24a79f70809c7d.hot-update.js 101 KiB 20 auxiliary assets
Entrypoint setup 18.6 MiB (16.5 MiB) = runtime.js 49.5 KiB runtime.35e54b24a79f70809c7d.hot-update.js 388 bytes vendors.js 7.25 MiB setup.js 11.2 MiB setup.35e54b24a79f70809c7d.hot-update.js 101 KiB 20 auxiliary assets
cached modules 18.5 MiB (javascript) 512 KiB (asset) [cached] 5923 modules
runtime modules 33.1 KiB 19 modules
javascript modules 99.8 KiB
  ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-2.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-2.use[2]!./frontend/src/index.css 99.6 KiB [built] [code generated]
  ./frontend/src/images/lottie/immersive-editor-loading-states/ sync ...(truncated) 241 bytes [optional] [built]
webpack 5.105.0 compiled successfully in 1314 ms
assets by status 32.9 MiB [cached] 31 assets
Entrypoint main 19.1 MiB (16.8 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB main.js 11.9 MiB 18 auxiliary assets
Entrypoint setup 18.5 MiB (16.4 MiB) = runtime.js 49.5 KiB vendors.js 7.25 MiB setup.js 11.2 MiB 18 auxiliary assets
cached modules 18.6 MiB (javascript) 512 KiB (asset) 33.1 KiB (runtime) [cached] 5944 modules
webpack 5.105.0 compiled successfully in 549 ms
Metric Sass (Dart Sass) Node-Sass Difference
Production Build Time 25,374 ms 38,485 ms ~34% Faster (Sass)
Initial HMR Start 12,145 ms 11,963 ms ~1.5% Faster (Node-Sass)
HMR Recompile (CSS) 1,309 ms 1,314 ms Negligible
Main CSS Bundle (Prod) 234 KiB 58.6 KiB ~75% Smaller (Node-Sass)*
Main JS Bundle (Prod) 2.3 MiB 3.11 MiB ~26% Smaller (Sass)
Total Entrypoint (Main) 4.57 MiB 5.21 MiB ~12% Smaller (Sass)

@cstns cstns merged commit 4b1e342 into main Mar 6, 2026
30 checks passed
@cstns cstns deleted the 6729-sass branch March 6, 2026 09:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Switch from node-sass to sass

3 participants