Liferay DXP 7.3 Theme Creation: Error during gulp build

Question

I'm getting this error when I try to use the gulp build command:

[09:08:11] Starting 'build:compile-css'...
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
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 outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2) or calc($input-padding-y / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
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 outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($custom-control-indicator-size, 2) or calc($custom-control-indicator-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
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 outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
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 outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
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

[09:08:14] 'build:compile-css' errored after 3.14 s
[09:08:14] 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: C:\Users\fmateosg\IdeaProjects\test\themes\base-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

[09:08:14] 'build' errored after 6.36 s

I know that there is a similar question to this one but the answers there couldn't solve my problem. This is my folder structure:

Folder structure

I copied the _dropdowns.scss file into src/css/compat/components/ and did the modification there but it still gives me the error when I retry to build

Answer 1

I had the same problem because I accidentally upgraded my liferay-theme-tasks in package.json to version 11.2.2.

If thats the case, downgrade liferay-theme-tasks to version ^10.0.2, remove the node_modules folder and run npm install again. Gulp build should pass after that.

I'm using Node.js version 14.17.0, gulp version 4.0.2