Encountering an error when compiling the itwin front-end web application using the Vite build tool

[guanhuaming]

When I tried to compile the itwin front-end web application using the Vite build tool, it failed to process the SCSS files introduced in the @itwin-related packages.
The error message is as follows, thanks for everyone's help：

F:\itwin\my-react-ts-app>npm run build:frontend-vite 

> [email protected] build:frontend-vite
> cross-env NODE_OPTIONS=--max_old_space_size=8192 vite build

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
x Build failed in 1.03s
error during build:
Error: Can't find stylesheet to import.
  ╷
5 │ @import "~@itwin/core-react/lib/cjs/core-react/style/index";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@itwin\appui-react\lib\cjs\appui-react\accudraw\Calculator.scss 5:9  root stylesheet
    at Object.wrapException (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:2161:43)
    at F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:82536:25
    at _wrapJsFunctionForAsync_closure.$protected (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:4900:15)
    at _wrapJsFunctionForAsync_closure.call$2 (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:35566:12)
    at _awaitOnObject_closure.call$1 (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:35554:32)
    at Object._rootRunUnary (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:5295:18)
    at StaticClosure.<anonymous> (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:115880:16)
    at _CustomZone.runUnary$2$2 (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:37018:39)
    at _Future__propagateToListeners_handleValueCallback.call$0 (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:36080:51)
    at Object._Future__propagateToListeners (F:\itwin\my-react-ts-app\node_modules\sass\sass.dart.js:5087:93)

The configuration file of vite.config.ts is as follows:

import { defineConfig, loadEnv, searchForWorkspaceRoot } from 'vite';
import envCompatible from 'vite-plugin-env-compatible';
import browserslistToEsbuild from 'browserslist-to-esbuild';
import viteInspect from 'vite-plugin-inspect';
import { externalGlobalPlugin } from 'esbuild-plugin-external-global';
import copy from 'rollup-plugin-copy';
import ignore from 'rollup-plugin-ignore';
import rollupVisualizer from 'rollup-plugin-visualizer';
import { webpackStats } from 'rollup-plugin-webpack-stats';
import * as packageJson from './package.json';
import path from 'path';
import react from '@vitejs/plugin-react';

const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';

// array of public directories static assets from dependencies to copy
const assets = ['./public/*']; // assets for test-app
// local path alias to the ts entry point of each package
const packageAliases = {};

Object.keys(packageJson.dependencies).forEach(pkgName => {
  if (pkgName.startsWith('@itwin') || pkgName.startsWith('@bentley')) {
    try {
      // gets dependency path
      const pkgPath = require.resolve(pkgName);

      // replaces everything after /lib/ with /lib/public/* to get static assets
      let pkgPublicPath = pkgPath.replace(/([\/\\]lib[\/\\]).*/, '$1public/*');

      const assetsPath = path.relative(process.cwd(), pkgPublicPath).replace(/\\/g, '/'); // use relative path with forward slashes
      if (assetsPath.endsWith('lib/public/*')) {
        // filter out pkgs that actually dont have assets
        assets.push(assetsPath);
      }

      // ignore pkgs outside the monorepo (will have temp in path) and pkgs that are for backend
      if (pkgPath.includes('temp') || pkgPath.includes('backend')) return;
      packageAliases[pkgName] = pkgPath;
      // .replace('\\lib\\cjs\\', '\\src\\')
      // .replace('/lib/cjs/', '/src/')
      // .replace('.js', '.ts');
    } catch {}
  }
});

// https://vitejs.dev/config/
export default defineConfig(() => {
  // This changes the output dir from dist to build
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  return {
    debug: mode === 'development',
    server: {
      open: false, // don't open browser
      port: 3000,
      strictPort: true, // exit if port is already in use
      fs: {
        // give Vite access to files in itwinjs-core root directory
        allow: [searchForWorkspaceRoot(process.cwd())]
      }
    },
    envPrefix: 'IMJS_',
    publicDir: '.static-assets',
    logLevel: process.env.VITE_CI ? 'error' : 'warn',
    build: {
      outDir: './lib',
      sourcemap: !process.env.VITE_CI,
      minify: false,
      target: browserslistToEsbuild(),
      commonjsOptions: {
        include: [/core\/electron/, /core\/mobile/, /node_modules/],
        transformMixedEsModules: true
      },
      rollupOptions: {
        input: path.resolve(__dirname, 'index.html'),
        plugins: [
          ...(process.env.OUTPUT_STATS !== undefined
            ? [
                rollupVisualizer({
                  open: true,
                  filename: 'stats.html',
                  template: 'treemap',
                  sourcemap: true
                }),
                webpackStats()
              ]
            : [])
        ]
      }
    },
    plugins: [
      react(),
      ignore(['electron']),
      copy({
        targets: [
          {
            src: assets,
            dest: '.static-assets',
            rename: (_name, _extension, fullPath) => {
              const regex = new RegExp('(public(?:\\\\|/))(.*)');
              return regex.exec(fullPath)![2];
            }
          }
        ],
        overwrite: true,
        copyOnce: true,
        hook: 'buildStart'
      }),
      envCompatible({
        prefix: 'IMJS_'
      })
    ],
    define: {
      'process.env': process.env
    },
    resolve: {
      alias: {
        ...packageAliases,
        '~': path.resolve(__dirname, 'node_modules')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: [path.resolve(__dirname, 'node_modules')],
        }
      }
    },
    optimizeDeps: {
      esbuildOptions: {
        plugins: [
          externalGlobalPlugin({
            electron: "window['electron']"
          })
        ]
      },
      force: true,
      include: [],
      exclude: ['@itwin/core-frontend', '@itwin/core-common']
    }
  };
});

[aruniverse]

Try adding this alias