Feeling Lucky
No Code Attached Yet
[#35698] - [4.0] npm fails to compile scss
- Closed
- 1 Oct 2021
- Medium
- Build: 4.0-dev
- # 35698
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.
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
brianteeman
- comment
- 29 Sep 2021
This should be closed
dgrammatiko
- comment
- 30 Sep 2021
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
- comment
- 1 Oct 2021
@C-Lodder still having the same issue..
- deleted all files except .git, .github, & .idea folder & configuration.php
- git reset --hard which did a fresh repopulation using 4.0-dev
- file was still missing
- git pull - nothing updated
- ran composer install - file still missing
- ran npm ci - still same errors
brianteeman
- comment
- 1 Oct 2021
@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
- comment
- 1 Oct 2021
Shouldn't be. This is the same way I've done things forever
brianteeman
- comment
- 1 Oct 2021
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
- comment
- 1 Oct 2021
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.
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-10-01 22:38:20 |
| Closed_By | ⇒ | N6REJ |
N6REJ
- comment
- 1 Oct 2021
@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.
please test #35648