Switch From Node SASS to Dart SASS for Old Sub-Themes
Last updated
Last updated
Warning: . 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 .
The maintainers no longer recommend LibSass for new Sass projects. Use instead.
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 and later do not need to do anything. They are using Dart Sass already.
Issue : Switched from deprecated to compiler using
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:
Change the package.json file with the following main important changes. Update local packages by running yarn install
in the folder of the theme.
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')),
This includes an all-new update for coding standards and linting with the Drupal Core.
After changing all needed files
Run yarn install
and yarn theme:build
or gulp compile
Check on changes after the re-compile and regression testing will be needed for sure.
In case forgotten to add the @use 'sass:math';
If not the yarn theme:build
or gulp compile
will face issues like:
Follow the latest changes from the following links for the complete list of changes that can be copied from them the :
Change the file
Change the file
Delete the file
Change the file
Change the file
Change the file
Change the file
Add the new file
Add the new file
Change the file
Add the needed from Dart Sass
Add @use 'sass:math';
to the top of the file
and use math.div
Custom SCSS files with old node-sass math divisions should be changed to use the module.
Issue : Switched from deprecated to compiler using and changed minimum node version to 16.0 and later in the Varbase Media Hero Slider module