Have anyone else noticed that buildtime basically goes twice as long when upgrading from 6.6.1 and 6.7.4?

[mbjorke]

I have been testing upgrading from webpack4 to webpack5. I know I have quite many things that can slow down the build times. I am testing 3 endpoints where a full build goes from about 10 seconds to 20 seconds, watching a single scss file after that goes from 1 to about 4 seconds. I tested also change to some file that doesn't use any foundation mixin and that goes much faster.

Here are the relevant packages I am testing with:

"devDependencies": {
    "@babel/core": "7.10.2",
    "@babel/plugin-proposal-class-properties": "7.10.1",
    "@babel/plugin-proposal-object-rest-spread": "7.10.1",
    "@babel/preset-env": "7.10.2",
    "babel-loader": "8.2.3",
    "clean-webpack-plugin": "4.0.0",
    "copy-webpack-plugin": "10.2.1",
    "css-loader": "3.4.2",
    "file-loader": "6.2.0",
    "filemanager-webpack-plugin": "2.0.5",
    "foundation-sites": "6.7.4",
    "html-webpack-plugin": "5.5.0",
    "html-webpack-processing-plugin": "1.0.1",
    "mini-css-extract-plugin": "2.5.3",
    "raw-loader": "4.0.2",
    "sass": "1.49.11",
    "sass-loader": "12.4.0",
    "style-loader": "3.3.1",
    "url-loader": "4.1.1",
    "webpack": "5.71.0",
    "webpack-cli": "4.9.2",
    "webpack-merge": "5.8.0",
  },
  "engines": {
    "node": ">=16.13.0"
  },

I mostly wanted to update to get rid of these kind of warnings:

<w> src/css/vendors/foundation-sites/scss/forms/_forms.scss 13:9  @import
<w> src/css/vendors/foundation-sites/scss/foundation.scss 28:9    @import
<w> src/css/zurb.scss 3:9                                   @import
<w> src/css/app.scss 1:9                                 root stylesheet
<w> 
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

[clizlee]

we updgraded our project not too long ago and I remember this calc() deprecation error. we found this https://sass-lang.com/documentation/breaking-changes/slash-div#automatic-migration and ran those lines and it fixed that error at least. but i believe we also had issues with scss processing super slow. I will try to look back and see how we fixed it.

[RVXD]

The new dart-sass ("sass": "^1.52.2") is very slow on mac M1 with node 16, 17, 18. If node is running in native arm64 code you are unable to install node-sass, so you are forced to use the newer much slower version of dart-sass which is completely written in javascript. I was hoping to speed things up with a newer native version of node.

The only way to get this properly running on Mac m1 is to run node v14.19.3 which is run through Rosetta and allows you to install the faster old node-sass.

Building foundation version 6.6.x (4.5 seconds) is also much faster than building foundation 6.7.x (9 seconds) (with node-sass).

For me the new dart-sass is unusable as it is way too slow.

Does anyone else know a faster solution? Why is foundation 6.7 slower than 6.6?

[aliciahubbard-ur]

I am having similar issues too, and added a bug report: #12592

[beephotography]

@RVXD you could try switching to the sass-embedded package (which is, as far as I know, maintained by the same team as the sass package and much faster)

[mbjorke]

Thx. Maybe worth another try. Is it the https://www.npmjs.com/package/sass-embedded that is referred to?

[beephotography]

yes that's correct

[Priestch]

I recently tried sass-embedded. It reduced the time taken by the sass:foundation task on my laptop from 52s to 3.66s. I suspect the Bootstrap project may faces the similar issue, and I find there is a css script in package.json of bootstrap project, it use sass-cli to compile directly, I ran and it only takes 11s, maybe there are something caused the slow compile.