Nx, Vite, React library does not apply Scss styles in the build

Question

I am new to the Nx monorepo, and I have built a couple of commonly used components in React to be used in a library called web, with styling handled by SCSS. When I use the library in the apps within the monorepo, it works perfectly. However, when I create a package and use it externally, none of the SCSS styles are being applied to the library. Except for the styling other things seems to be working in the package.

package.json

{
  "name": "@example/web",
  "version": "1.1.3",
  "license": "UNLICENSED",
  "main": "./index.js",
  "types": "./index.d.ts",
  "exports": {
    ".": {
      "import": "./index.mjs",
      "require": "./index.js"
    }
  },
  "repository": {
    "directory": "libs/web",
    "type": "git",
    "url": "...."
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }
}

project.json

{
  "name": "web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/web/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "lint": {
      /////////
    },
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/libs/web"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },
    "test": {
      ////////////
    }
  }
}

vite.config.ts

export default defineConfig({
  cacheDir: '../../node_modules/.vite/web',
  plugins: [
    dts({
      entryRoot: 'src',
      tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'),
      skipDiagnostics: true,
    }),
    react(),
    viteTsConfigPaths({
      root: '../../',
    }),
  ],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'web',
      fileName: 'index',
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime']
    },
  },
});

It seems like the styles are bundled with the output file index.js based on the documentation. However, despite observing a style.css file being generated with all the styles included, it appears that, even when added manually to the project, the styles are not being applied properly.

build dir

If there were a plugin available to inject SCSS styles into the output index.js file, it would be an ideal solution. Alternatively, any other viable solution for this issue would be appreciated.