Can't resolve node_modules import in video-js.scss with yarn berry

[rtritto]

Description

I'm using yarn (berry version) with video.js, sass, sass-loader and webpack modules. I have a scss file with video.js/src/css/video-js.scss import. video.js/src/css/video-js.scss file imports node_modules/videojs-font/scss/icons. During compiling, I get an import error on node_modules/videojs-font/scss/icons.

Steps to reproduce

1. yarn init -y
2. yarn set version berry
3. yarn add sass sass-loader video.js@next webpack webpack-cli
4. Create files:

• src/index.js

import './styles.scss'

• src/styles.scss

@import 'video.js/src/css/video-js.scss';

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass')
            }
          }
        ]
      }
    ]
  }
}

5. yarn webpack

Results

Expected

Build completed.

Actual

During build, I get this error:

SassError: Can't find stylesheet to import.
  ╷
5 │ @import "node_modules/videojs-font/scss/icons";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Additional Information

versions

sass: 1.32.11 - 1.44.0

sass-loader: 10.0.5 - 12.3.0

video.js: 7.11.8 - 7.17.1

yarn: 2.4.1 - 3.1.1

webpack: 4.46.0 - 5.65.0

webpack-cli: 4.7.2

OS

Windows

How to fix (Updated)

1. In file video.js/src/css/video-js.scss change the import (remove hardcoded node_modules):

 @import "private-variables";
 @import "utilities";
 
- @import "node_modules/videojs-font/scss/icons";
+ @import "videojs-font/scss/icons";
 
 @import "components/layout";
 @import "components/big-play";

2. In scripts of package.json change the value of option load-path (from './' to node_modules):

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

Workaround

1. yarn patch video.js
2. Go to created folder and edit src/css/video-js.scss with:

 @import "private-variables";
 @import "utilities";
 
- @import "node_modules/videojs-font/scss/icons";
+ @import "videojs-font/scss/icons";
 
 @import "components/layout";
 @import "components/big-play";

3. yarn patch-commit -s "<created_folder_path>"
4. yarn

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

I'd have to investigate some more, but I think changing the path in there will potentially break all current users of our sass styles. In addition, we'd want to make sure that our regular dist builds continue working as well, and based on what I've seen from the sass module, it doesn't do module resolution itself.

[rtritto]

As workaround, waiting for the fix, should I use some configuration in webpack to rewrite/resolve/alias that import?

Webpack documentation reports how to import:

@import "bootstrap";

The loader will first try to resolve @import as a relative path.
If it cannot be resolved, then the loader will try to resolve @import inside node_modules.

Not each package manager and loader use node_modules as folder for modules, so it should not be hardcoded.

Similar to #3998, #6531

[rtritto]

Is there any update?

https://github.com/webpack-contrib/sass-loader/issues/802#issuecomment-826322124

FYI @arcanis @mister-ben

[gkatsev]

I haven't had a chance to investigate this. Does our CSS build still work after removing node_modules? Also, I'd be worried about folks using various sass scripts like sass and node-sass. We can't breaking people in a patch or minor release.

[rtritto]

Thanks for answer. Running current scripts in package.json:

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

I get:

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

I completed both build scripts simply changing the value of option load-path from './' to node_modules.

[rtritto]

@gkatsev video-js.scss file can't be imported or compiled with node-sass but only with sass like build:css scripts, in package.json of video.js, that use sass.

Anyway node-sass isn't supported by sass-loader using Yarn PnP (berry/v2).

Source from documentation of sass-loader:

• ℹ️ We highly recommend using Dart Sass.
• ⚠ Node Sass does not work with Yarn PnP feature and doesn't support @use rule.

node-sass is also deprecated, source from documentation:

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rtritto]

Up

[rtritto]

Added a workaround.