Liferay Theme Creation : Error During gulp build and gulp deploy

Question

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.

Answer 1

I have the same issue but you can work around by overriding the file:

1. Go into your src folder
2. If you don't have create css folder
3. Then create /compat/components/_dropdowns.scss
4. Now here you can override the file
5. Run build command and you're done!

Answer 2

Did you found any solution? i have the same problem

Answer 3

The very same happened to me and couldn't get rid of the error until I removed my ^16 node version and my yeoman version, and I reinstalled node's 10.16.3 version, yo's 3.1.1 version, gulp's 4.0.2 version, and then followed this guide step by step: https://help.liferay.com/hc/es/articles/360028834632-Installing-the-Theme-Generator-and-Creating-a-Theme (except for the 3rd step, I didn't need to install node-gyp and Python, although it may be a good idea). After that I could deploy normally.