SassError: File to import not found or unreadable: @bentley/ui-core/lib/ui-core/scrollbar.

[mibib7]

I am trying to create a basic OIDC SignIn page using the provided components of ImodelJS on an external project to the monorepo.

To do so, I used npm install to install what I think are the minimal dependencies needed. Here's is the partial content on my package.json file:

"dependencies": {
    "@bentley/bentleyjs-core": "^1.11.0",
    "@bentley/geometry-core": "^1.11.0",
    "@bentley/imodeljs-clients": "^1.11.0",
    "@bentley/imodeljs-common": "^1.11.0",
    "@bentley/imodeljs-frontend": "^1.11.0",
    "@bentley/imodeljs-i18n": "^1.11.0",
    "@bentley/imodeljs-quantity": "^1.11.0",
    "@bentley/presentation-common": "^1.11.0",
    "@bentley/presentation-frontend": "^1.11.0",
    "@bentley/ui-components": "^1.11.0",
    "@bentley/ui-core": "^1.11.0",
    "@bentley/ui-framework": "^1.11.0",
    "@bentley/ui-ninezone": "^1.11.0",
    ...

Based on the ui-test-app code, I wanted to write a basic SignIn component, but I end up with the following error during compilation:

./node_modules/@bentley/ui-ninezone/lib/ui-ninezone/widget/rectangular/Content.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./node_modules/@bentley/ui-ninezone/lib/ui-ninezone/widget/rectangular/Content.scss)
SassError: File to import not found or unreadable: @bentley/ui-core/lib/ui-core/scrollbar.
        on line 5 of node_modules/@bentley/ui-ninezone/lib/ui-ninezone/_scrollbar.scss
        from line 6 of D:\_uni\GLO-3002-Projet-GLO\glo-3002-projetglo_explorer\node_modules\@bentley\ui-ninezone\lib\ui-ninezone\widget\rectangular\Content.scss
>> @import "@bentley/ui-core/lib/ui-core/scrollbar";

   ^

My code, at the present, only consist of:

import * as React from "react";
import { UiFramework } from "@bentley/ui-framework";
import { Redirect} from "react-router-dom";

const SignIn = () => {
  const isAuthorized = !!UiFramework.oidcClient && UiFramework.oidcClient.isAuthorized; 
  if (isAuthorized) {
    return (<Redirect to="/StandIn"/>);
  }

  // Todo: use IModelJS SingIn component here 
  return (
    <div>
      Sign In.
    </div>
  );
}

export default SignIn;

[DanEastBentley]

The error is related to sass-loader and how the Sass partial files are being imported. Are you using the iModel.js webpack tools or your own? If you're using your own, a webpack configuration rule like the following is required:

const config: webpack.Configuration = { module: { rules: [ . . . { loader: require.resolve("sass-loader"), options: { includePaths: [path.resolve(__dirname, "..", "node_modules")], }, test: /.scss$/, }, . . .