(Still) Wrong path for font scss in video-js.scss on v8.0.4

[BrainCrumbz]

Description

Apparently we met the issue mentioned at #7863 .

Reduced test case

No response

Steps to reproduce

1. Clone the git repository
2. rum npm install
3. run npm test. Also, one can run npm run build afterwards.

Expected result:
All should be fine.

Actual result: scripts show errors.

Errors

[... omitted ...]
> [email protected] build:css
> npm-run-all build:css:*


> [email protected] build:css:cdn
> sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css

Error: Can't find stylesheet to import.
  ╷
5 │ @import "videojs-font/scss/icons";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\css\video-js.scss 5:9  @import
  src\css\vjs-cdn.scss 3:9   root stylesheet
ERROR: "build:css:cdn" exited with 65.
ERROR: "build:css" exited with 1.

The errors seem the same for test or build.

What version of Video.js are you using?

8.0.4 up to commit a27ee05

Video.js plugins used.

None

What browser(s) including version(s) does this occur with?

None. This is from command line

What OS(es) and version(s) does this occur with?

Windows 11
npm 9.3.1
node v18.14.0

Both from windows command line as well as WSL terminal.

[BrainCrumbz]

Is there any workaround (even temporary) for this one? So that we can run tests and give a go to #8136

[BrainCrumbz]

Is it possibile that issue is caused by using a different version of npm? When we run npm install, it says that package-lock.json file was created with an old version of npm. Can it be?

[amtins]

@BrainCrumbz I just tested to see if we could possibly run into the same error. However, I did not encounter this issue. But maybe I didn't follow the procedure as described.

Here is what I did:

• I've node v18.15.0, npm v9.5.0
• I clone de repo [email protected]:videojs/video.js.git, with the latest version 8.2.0
• I CD into the folder
• I ran npm install
• I ran npm test
• I ran npm run build

Everything went smoothly, see the logs:

> [email protected] build:css
> npm-run-all build:css:*


> [email protected] build:css:cdn
> sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css


> [email protected] postbuild:css:cdn
> postcss --verbose --config postcss.config.js -d dist/alt dist/alt/video-js-cdn.css

Processing dist/alt/video-js-cdn.css...
Finished dist/alt/video-js-cdn.css in 260 ms

> [email protected] build:css:default
> sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs.scss dist/video-js.css


> [email protected] postbuild:css:default
> postcss --verbose --config postcss.config.js -d dist/ dist/video-js.css

Processing dist/video-js.css...
Finished dist/video-js.css in 247 ms

[amtins]

Same result with videojs 8.0.4

> [email protected] build:css
> npm-run-all build:css:*


> [email protected] build:css:cdn
> sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css


> [email protected] postbuild:css:cdn
> postcss --verbose --config postcss.config.js -d dist/alt dist/alt/video-js-cdn.css

Processing dist/alt/video-js-cdn.css...
Finished dist/alt/video-js-cdn.css in 252 ms

> [email protected] build:css:default
> sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs.scss dist/video-js.css


> [email protected] postbuild:css:default
> postcss --verbose --config postcss.config.js -d dist/ dist/video-js.css

Processing dist/video-js.css...
Finished dist/video-js.css in 254 ms

[BrainCrumbz]

Thanks for your info. Is that a Windows machine?

[amtins]

@BrainCrumbz I'm using an Ubuntu 22.04 machine. I add the following warning, since the package-lock was generated with an "older" npm version. But it shouldn't have any side effect.

npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 

Did you try to delete the dist folder and the node_modules to see if it fixes the issue ?

[BrainCrumbz]

Yes we see that warning on package-lock too. Just for completeness:

• we tried with video.js v8.2.0 as well as most recent commit, 35c539d
• we tried both on windows terminal as well as Windows Linux Subsystem with Ubuntu (no linux machine available at the moment)
• we deleted both dist and node_modules and installed/built again

with no effect on the issue.

What are the contents of videojs-font\scss after npm i? Because we see only these 2 files:

videojs-icons.scss
_icons.scss

and I don't know if that's consistent with the code importing:

@import "videojs-font/scss/icons";

I mean, there's no file named icons but actually it's _icons, not sure if that's the way it is supposed to be

[BrainCrumbz]

ok, just checked on Sass guide, the underscore is expected

[BrainCrumbz]

As a (temporary?) workaround this is the change that enabled us to build and test successfully:

@import "../../node_modules/videojs-font/scss/icons";

[lihqi]

I had the same problem with my project using lerna to manage packages

[fauzi9331]

I had the same problem and managed to fix it by removing ' in --load-path in package.json

before:

"build:css:cdn": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css",

after

"build:css:cdn": "sass --load-path=./ --load-path=./node_modules/ --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css",

But i'm not sure about its side effect

Windows 11 npm 9.6.7 node v20.3.1

[ahm23]

@fauzi9331 's solution works for me as well. Remove the quotes around the "load paths" for both "build:css:cdn" and "build:css:default" in package.json and everything builds with no issues.

Windows 10 Node v18.18.0 npm v10.1.0

[BrainCrumbz]

We just forked main today, so video.js is 8.11.8. Following @ahm23 integrations worked for us, that is: we had to modify both build:css:cdn and build:css:default tasks in package.json. Only modifying the first task was not enough for us.

Windows 11, 23H2 node 18.14.0 npm 9.3.1

[mister-ben]

Do escaped double quotes work on people's environments that have problems with single quotes?, e.g. "sass --load-path=\"./\" …

[BrainCrumbz]

Hi there

just tried with these changes, the way you suggested:

npm run build completed with no errors. Same for npm run start. Would that also work on Unix/MacOS machines?

[mister-ben]

I think that should work everywhere, yes

[BrainCrumbz]

Good news. If you need some more tests on Windows, we could try. Also WSL with Ubuntu.