Improve CSS Modules backward compatibility documentation (#809)

docs/v9_upgrade.md

@@ -155,8 +155,74 @@ import * as styles from './Component.module.css';
    This allows you to keep using default imports while migrating gradually
 
 3. **Keep v8 behavior** using webpack configuration (Advanced):
-   - Override the css-loader configuration as shown in [CSS Modules Export Mode documentation](./css-modules-export-mode.md)
-   - Provides more control over the configuration
+
+   If you need more control over the configuration, you can override the css-loader settings directly in your webpack config.
+
+   **Where to add this:** Create or modify `config/webpack/webpack.config.js`. If this file doesn't exist, create it and ensure your `config/webpacker.yml` or build process loads it. See [Webpack Configuration](./webpack.md) for details on customizing webpack.
+
+   ```javascript
+   // config/webpack/webpack.config.js
+   const { generateWebpackConfig, merge } = require("shakapacker")
+
+   const customConfig = () => {
+     const config = merge({}, generateWebpackConfig())
+
+     // Override CSS Modules to use default exports (v8 behavior)
+     config.module.rules.forEach((rule) => {
+       if (
+         rule.test &&
+         (rule.test.test("example.module.scss") ||
+           rule.test.test("example.module.css"))
+       ) {
+         if (Array.isArray(rule.use)) {
+           rule.use.forEach((loader) => {
+             if (
+               loader.loader &&
+               loader.loader.includes("css-loader") &&
+               loader.options &&
+               loader.options.modules
+             ) {
+               // Disable named exports to support default imports
+               loader.options.modules.namedExport = false
+               loader.options.modules.exportLocalsConvention = "camelCase"
+             }
+           })
+         }
+       }
+     })
+
+     return config
+   }
+
+   module.exports = customConfig
+   ```
+
+   **Key points:**
+   - Test both `.module.scss` and `.module.css` file extensions
+   - Validate all loader properties exist before accessing them
+   - Use `.includes('css-loader')` since the loader path may vary
+   - Set both `namedExport: false` and `exportLocalsConvention: 'camelCase'` for full v8 compatibility
+
+   **Debugging tip:** To verify the override is applied correctly, you can inspect the webpack config:
+
+   ```javascript
+   // Add this temporarily to verify your changes
+   if (process.env.DEBUG_WEBPACK_CONFIG) {
+     const cssModuleRules = config.module.rules
+       .filter((r) => r.test?.test?.("example.module.css"))
+       .flatMap((r) => r.use?.filter((l) => l.loader?.includes("css-loader")))
+     console.log(
+       "CSS Module loader options:",
+       JSON.stringify(cssModuleRules, null, 2)
+     )
+   }
+   ```
+
+   Then run: `DEBUG_WEBPACK_CONFIG=true bin/shakapacker`
+
+   **Note:** This is a temporary solution. The recommended approach is to migrate your imports to use named exports as shown in the main documentation.
+
+   For detailed configuration options, see the [CSS Modules Export Mode documentation](./css-modules-export-mode.md)
 
 **Benefits of the change:**