search

joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.79k stars 3.65k forks source link

[4.0] npm fails to compile scss #35698

Closed N6REJ closed 3 years ago

N6REJ commented 3 years ago

Steps to reproduce the issue

pull latest 4.0-dev. run "npm ci"

Expected result

updates cleanly.

Actual result

throws errors and fails during .css segement.

System information (as much as possible)

composer 2.1.5 npm 7.24.1

2021-09-29T11_51_59_501Z-debug.log

Processing Vendor file: media\vendor\webcomponentsjs\js\webcomponents-bundle.js
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($col-gutter-width, 2)

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

   ╷
30 │   padding-right: ($col-gutter-width / 2);
   │                   ^^^^^^^^^^^^^^^^^^^^^
   ╵
    build\media_source\com_media\scss\components\_layout.scss 30:19  @import
    build\media_source\com_media\scss\media-manager.scss 6:9         root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($col-gutter-width, 2)

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

   ╷
31 │   padding-left: ($col-gutter-width / 2);
   │                  ^^^^^^^^^^^^^^^^^^^^^
   ╵
    build\media_source\com_media\scss\components\_layout.scss 31:18  @import
    build\media_source\com_media\scss\media-manager.scss 6:9         root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($col-gutter-width, 2)

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

   ╷
27 │     margin-right: -($col-gutter-width / 2);
   │                     ^^^^^^^^^^^^^^^^^^^^^
   ╵
    build\media_source\com_media\scss\components\_media-infobar.scss 27:21  @import
    build\media_source\com_media\scss\media-manager.scss 10:9               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($col-gutter-width, 2)

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

   ╷
28 │     margin-left: -($col-gutter-width / 2);
   │                    ^^^^^^^^^^^^^^^^^^^^^
   ╵
    build\media_source\com_media\scss\components\_media-infobar.scss 28:20  @import
    build\media_source\com_media\scss\media-manager.scss 10:9               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($col-gutter-width, 2)

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

   ╷
34 │     padding-right: ($col-gutter-width / 2);
   │                     ^^^^^^^^^^^^^^^^^^^^^
   ╵
    build\media_source\com_media\scss\components\_media-infobar.scss 34:21  @import
    build\media_source\com_media\scss\media-manager.scss 10:9               root stylesheet

WARNING: 3 repetitive deprecation warnings omitted.

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

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

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    media\vendor\fontawesome-free\scss\_variables.scss 12:25    @import
    media\vendor\fontawesome-free\scss\fontawesome.scss 5:9     @import
    build\media_source\system\scss\joomla-fontawesome.scss 6:9  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3)

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

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    media\vendor\fontawesome-free\scss\_larger.scss 6:15        @import
    media\vendor\fontawesome-free\scss\fontawesome.scss 8:9     @import
    build\media_source\system\scss\joomla-fontawesome.scss 6:9  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4)

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

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    media\vendor\fontawesome-free\scss\_larger.scss 7:17        @import
    media\vendor\fontawesome-free\scss\fontawesome.scss 8:9     @import
    build\media_source\system\scss\joomla-fontawesome.scss 6:9  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4)

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

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    media\vendor\fontawesome-free\scss\_list.scss 6:16          @import
    media\vendor\fontawesome-free\scss\fontawesome.scss 10:9    @import
    build\media_source\system\scss\joomla-fontawesome.scss 6:9  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($switcher-width - 6, 2)

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

   ╷
96 │   width: ($switcher-width - 6) / 2;
   │          ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    build\media_source\system\scss\fields\switcher.scss 96:10  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($switcher-width, 2)

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

    ╷
103 │   left: ($switcher-width / 2) - 1;
    │          ^^^^^^^^^^^^^^^^^^^
    ╵
    build\media_source\system\scss\fields\switcher.scss 103:10  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($cassiopeia-grid-gutter, 2)

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

   ╷
87 │     padding: $cassiopeia-grid-gutter/2;
   │              ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_global.scss 87:14  @import
    templates\cassiopeia\scss\template.scss 15:9         @import
    templates\cassiopeia\scss\template-rtl.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($cassiopeia-grid-gutter, 2)

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

   ╷
10 │   padding: $cassiopeia-grid-gutter/2;
   │            ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_back-to-top.scss 10:12  @import
    templates\cassiopeia\scss\template.scss 17:9              @import
    templates\cassiopeia\scss\template-rtl.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($cassiopeia-grid-gutter, 2)

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

   ╷
12 │     padding: 2.5rem ($cassiopeia-grid-gutter/2);
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_footer.scss 12:22  @import
    templates\cassiopeia\scss\template.scss 19:9         @import
    templates\cassiopeia\scss\template-rtl.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($cassiopeia-grid-gutter, 2)

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

   ╷
15 │     padding: ($cassiopeia-grid-gutter / 2);
   │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_header.scss 15:15  @import
    templates\cassiopeia\scss\template.scss 22:9         @import
    templates\cassiopeia\scss\template-rtl.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($cassiopeia-grid-gutter, 2)

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

   ╷
20 │     margin-top: $cassiopeia-grid-gutter / 2;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_header.scss 20:17  @import
    templates\cassiopeia\scss\template.scss 22:9         @import
    templates\cassiopeia\scss\template-rtl.scss 1:9      root stylesheet

WARNING: 9 repetitive deprecation warnings omitted.

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($cassiopeia-grid-gutter, 2)

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

   ╷
87 │     padding: $cassiopeia-grid-gutter/2;
   │              ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_global.scss 87:14  @import
    templates\cassiopeia\scss\template.scss 15:9         root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($cassiopeia-grid-gutter, 2)

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

   ╷
10 │   padding: $cassiopeia-grid-gutter/2;
   │            ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_back-to-top.scss 10:12  @import
    templates\cassiopeia\scss\template.scss 17:9              root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($cassiopeia-grid-gutter, 2)

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

   ╷
12 │     padding: 2.5rem ($cassiopeia-grid-gutter/2);
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_footer.scss 12:22  @import
    templates\cassiopeia\scss\template.scss 19:9         root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($cassiopeia-grid-gutter, 2)

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

   ╷
15 │     padding: ($cassiopeia-grid-gutter / 2);
   │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_header.scss 15:15  @import
    templates\cassiopeia\scss\template.scss 22:9         root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($cassiopeia-grid-gutter, 2)

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

   ╷
20 │     margin-top: $cassiopeia-grid-gutter / 2;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    templates\cassiopeia\scss\blocks\_header.scss 20:17  @import
    templates\cassiopeia\scss\template.scss 22:9         root stylesheet

WARNING: 9 repetitive deprecation warnings omitted.

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(-$choices-button-offset, 2)

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

    ╷
129 │     margin-right: -$choices-button-offset/2;
    │                   ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    media\vendor\choicesjs\scss\choices.scss 129:19              @import
    templates\cassiopeia\scss\vendor\choicesjs\choices.scss 6:9  root stylesheet

Error: Can't find stylesheet to import.
   ╷
64 │ @import "pages/com_joomlaupdate";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  administrator\templates\atum\scss\template.scss 64:9  root stylesheet
npm ERR! code 1
npm ERR! path D:\Development\xampp\htdocs\www\j4
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node build/build.js --prepare

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\troy\AppData\Local\npm-cache\_logs\2021-09-29T11_51_59_501Z-debug.log

Additional comments

ran "composer install" and no changes were done then ran "npm ci" failed and noted that npm version was out of date so updated it.

brianteeman commented 3 years ago

please test #35648

brianteeman commented 3 years ago

This should be closed

C-Lodder commented 3 years ago

@N6REJ Does administrator/templates/atum/scss/pages/_com_joomlaupdate.scss exist for you?

If you fetched the latest changes from the repo, it should be there.

dgrammatiko commented 3 years ago

then ran "npm ci" failed and noted that npm version was out of date so updated it.

DON'T do update npm packages blindly or things will be broken. You need to know what is to be updated (no B/C breaks) and what cannot be safely updated because it has B/C breaks and thus the tools or the code of the repo needs to be adjusted.

N6REJ commented 3 years ago

@C-Lodder no, and after the pull just now & npm ci it still doesn't. image

C-Lodder commented 3 years ago

@N6REJ I don't think you pulled the latest code correctly. The file is missing from your local repo and should definitely be there.

N6REJ commented 3 years ago

@C-Lodder still having the same issue.. 1) deleted all files except .git, .github, & .idea folder & configuration.php 2) git reset --hard which did a fresh repopulation using 4.0-dev 3) file was still missing 4) git pull - nothing updated 5) ran composer install - file still missing 6) ran npm ci - still same errors

brianteeman commented 3 years ago

@N6REJ the problem is that you are doing a git pull from YOUR fork of 4.0-dev and not from joomla.

Your fork is not up to date and is missing files. Hence the problem YOU are having and why no one else has the problem

Here you can see that your fork does not have the file you need. https://github.com/N6REJ/joomla-cms/tree/4.0-dev/administrator/templates/atum/scss/pages

N6REJ commented 3 years ago

Shouldn't be. This is the same way I've done things forever image image

brianteeman commented 3 years ago

I can only comment on what I can see and your branch is not up to date and that is what you have pulled from

N6REJ commented 3 years ago

yeah... I just deleted everything again & did git reset --hard origin/4.0-dev and it showed up. I do still get the failed npm however. idky it wasn't doing it right before.

N6REJ commented 3 years ago

@brianteeman ok, even though I got the / error it still completed npm. All Seems to be working including the menu issue. Thanks guys. idky I had trouble.