2

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 .

2 Answers 2

4

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!
Sign up to request clarification or add additional context in comments.

1 Comment

Is _dropdowns.scss no _dropdown.scss
0

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.

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.