Message Boards

Issues when building theme

Daniel G, modified 2 Years ago.

Issues when building theme

Regular Member Posts: 141 Join Date: 3/14/17 Recent Posts

Hi,

I am facing issues with my environment, I guess. I am trying to create a new theme, but I am receiving errors like this when I try to compile:

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

[08:42:06] 'build:compile-css' errored after 4.11 s
[08:42:06] 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.
See http://bit.ly/ExtendCompound for details.

   ╷
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.
See http://bit.ly/ExtendCompound for details.

   ╷
34 │         @extend .dropdown-item.disabled;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  build\_css\compat\components\_dropdowns.scss 34:11  root stylesheet
    line: 34
    column: 11
    file: C:\Proyectos\theme\test-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.
See http://bit.ly/ExtendCompound for details.

   ╷
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.
See http://bit.ly/ExtendCompound for details.

   ╷
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

[08:42:06] 'build' errored after 7.51 s

My versions are:

gulp - 4.0.3

node - 16.13.2

npm - 8.1.2

 

Anyone can help me with this?

Thanks in advance     

Regards

Daniel G, modified 2 Years ago.

RE: Issues when building theme (Answer)

Regular Member Posts: 141 Join Date: 3/14/17 Recent Posts

For anyone who has this issue, after a lot of test, these are the versions that make it work:

- nodejs 10.16.3   

- gulp 3.9.1

- yeoman 3.1.1

- python 2.7.18

- generator liferay-theme 9.5.4

 

Regards