After installing all the necessary packages, I am trying to build a theme for Liferay 7.3 version. I have installed all the packages needed such as nodejs, npm, gulp ad ruby (sass and compass).
After executing gulp build, I am getting the following error :
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
╷
306 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
build/_css/clay/bootstrap/_variables.scss 306:31 @import
build/_css/clay/base.scss 10:9 @import
build/_css/clay.scss 1:9 root stylesheet
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
╷
501 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
build/_css/clay/bootstrap/_variables.scss 501:73 @import
build/_css/clay/base.scss 10:9 @import
build/_css/clay.scss 1:9 root stylesheet
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($custom-control-indicator-size, 2)
╷
571 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
build/_css/clay/bootstrap/_variables.scss 571:49 @import
build/_css/clay/base.scss 10:9 @import
build/_css/clay.scss 1:9 root stylesheet
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
╷
717 │ $nav-divider-margin-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
build/_css/clay/bootstrap/_variables.scss 717:37 @import
build/_css/clay/base.scss 10:9 @import
build/_css/clay.scss 1:9 root stylesheet
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
╷
722 │ $navbar-padding-y: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
build/_css/clay/bootstrap/_variables.scss 722:37 @import
build/_css/clay/base.scss 10:9 @import
build/_css/clay.scss 1:9 root stylesheet
[10:56:46] 'build:compile-css' errored after 13 s
[10:56:46] Error in plugin "sass"
Message:
build/_css/compat/components/_dropdowns.scss
Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
╷
34 │ @extend .dropdown-item.disabled;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
Details:
formatted: Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
╷
34 │ @extend .dropdown-item.disabled;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
line: 34
column: 11
file: /home/osboxes/liferayExercise/my-liferay-theme/build/_css/compat/components/_dropdowns.scss
status: 1
messageFormatted: build/_css/compat/components/_dropdowns.scss
Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
╷
34 │ @extend .dropdown-item.disabled;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
messageOriginal: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
╷
34 │ @extend .dropdown-item.disabled;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
**build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
relativePath: build/_css/compat/components/_dropdowns.scss
domainEmitter: [object Object]
domainThrown: false**
[10:56:46] 'build' errored after 19 s
Packages version are :
Node : 12.22.7
Npm : 6.14.15
Gulp :CLI version: 2.3.0 ,Local version: 4.0.0
NOTE: I cannot edit these files as they are automatically generated. So i cannot change those .
I have the same issue but you can work around by overriding the file:
src folder/compat/components/_dropdowns.scss