SOLUTION: how to make it work on older browsers (Windows 7/8/Chrome v109/Edge v109)

[device008]

As you know, in Windows 8, the version of Chrome (and Edge) is not updated above version 109.

To Reproduce

1. Start Chrome v109 (from Windows 7/8, or from oldest phones)
2. Open react-data-grid-demo
3. open the built-in debugger and you will see that some css styles are not recognized by the browser.
4. css_error_screenshot1
   

##Code that causes an error

import 'react-data-grid/lib/styles.css';

Environment

• react-data-grid version: "react-data-grid": "7.0.0-beta.46" and "react-data-grid": "7.0.0-beta.47".
• react/react-dom version: "react": "^19.0.0", "react-dom": "^19.0.0".

The solution I propose to make everything work perfectly in Chrome v109:

1. Rename 'react-data-grid/lib/styles.css' to 'react-data-grid/lib/styles.scss'
2. import as scss:

import 'react-data-grid/lib/styles.scss';

3. install sass, or sass-embedded"sass": "^1.83.4",
4. use vite.config.ts like:

import { defineConfig } from 'vite'
import React from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      },
    },
  },
})

5. Now everything works in Chrome v109 / Edge v109