Switch From Node SASS to Dart SASS for Old Sub-Themes
Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.
- The maintainers recommend all existing LibSass users make plans to eventually move onto Dart Sass, and that all Sass libraries make plans to eventually drop support for LibSass.
- The maintainers are no longer planning to add any new features to LibSass, including compatibility with new CSS features.
- LibSass and Node Sass will continue to be maintained indefinitely on a best-effort basis, including fixing major bugs and security issues and maintaining compatibility with the latest Node versions.
It is an optional direction to use the latest Dart Sass in old projects. An old project can stay using the old Node Sass package compiler. But the NPM or Yarn may face issues with old packages which are related to old not updated or no longer maintained.
Projects which had generated a new sub-theme using the
Vartheme BS4 9.0.13 and later do not need to do anything. They are using Dart Sass already.
Old sub-themes which had been generated from an older Vartheme BS4 version. 9.0.11 and older should follow the following steps to have the full switch:
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt update
sudo apt install nodejs
sudo apt install build-essential
curl -L https://npmjs.com/install.sh | sudo -E bash -
sudo apt update
sudo apt install npm
- Change the package.json file with the following main important changes. Update local packages by running
yarn installin the folder of the theme.
...
...
"sass": "~1",
"gulp": "~4",
"gulp-autoprefixer": "~8",
"gulp-clean-css": "~4",
"gulp-concat": "~2",
"gulp-csscomb": "~3",
"gulp-filter": "~7",
"gulp-html-replace": "~1",
"gulp-postcss": "~8",
"gulp-rename": "~2",
"gulp-sass": "~5",
"gulp-scss-lint": "~1",
"gulp-sourcemaps": "~3",
"gulp-uglify": "~3",
...
...
- Change the gulpfile.js file from having the following required statements for the SASS object:
From
sass = require("gulp-sass"),To
sass = require("gulp-sass")(require('sass')), Follow the latest changes from the following links for the complete list of changes that can be copied from them the
VARTHEME BS4 SUBTHEME: This includes an all-new update for coding standards and linting with the Drupal Core.
After changing all needed files
Run
yarn installand
yarn theme:build or gulp compile Check on changes after the re-compile and regression testing will be needed for sure.
Add the needed Built-in Modules from Dart Sass
Add
@use 'sass:math'; to the top of the file
and use math.divIn case forgotten to add the
@use 'sass:math';If not the
yarn theme:build or gulp compile will face issues like:Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($hero-max-height, 2) or calc($hero-max-height / 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
79 │ $top_max_value: $hero-max-height/2;
│ ^^^^^^^^^^^^^^^^^^
╵
scss/components/varbase-heroslider-media.component.scss 79:21 root stylesheet
- Issue #3272442: Switched from deprecated Node Sass to Dart Sass compiler using Gulp and changed minimum node version to 16.0 and later in the Varbase Media Hero Slider module https://www.drupal.org/project/varbase_heroslider_media/issues/3272442#comment-14472265
Last modified 11mo ago