update migration guide for commonjs (#30267)

Co-authored-by: Lennart <[email protected]>

Author: wardpeet

docs/docs/reference/release-notes/migrating-from-v2-to-v3.md

@@ -367,7 +367,30 @@ const Box = ({ children }) => (
 export default Box
 ```
 
-You can also still import all styles using the `import * as styles` syntax e.g. `import * as styles from './mystyles.module.css'`. However, this won't allow webpack to treeshake your styles so we discourage you from using this syntax.
+You can also import all styles using the `import * as styles` syntax e.g. `import * as styles from './mystyles.module.css'`. However, this won't allow webpack to treeshake your styles so we discourage you from using this syntax.
+
+Migrating all your CSS could be painful or you're relying on third-party packages that require you to use CommonJS. You can work around this issue for Sass, Less, Stylus & regular CSS modules using respective plugins. If you're using regular CSS modules, please install [gatsby-plugin-postcss](https://www.gatsbyjs.com/plugins/gatsby-plugin-postcss/) to override the defaults.
+
+This example covers Sass. The other plugins share the same `cssLoaderOptions` property.
+
+```diff:title=gatsby-config.js
+module.exports = {
+  plugins: [
+-    `gatsby-plugin-sass`,
++    {
++      resolve: `gatsby-plugin-sass`,
++      options: {
++       cssLoaderOptions: {
++         esModule: false,
++         modules: {
++           namedExport: false,
++         },
++       },
++     },
++    }
+  ]
+}
+```
 
 ### File assets (fonts, pdfs, ...) are imported as ES Modules