diff --git a/integration-tests/artifacts/gatsby-browser.js b/integration-tests/artifacts/gatsby-browser.js
index 1a0a374d24012..86e3c8d855932 100644
--- a/integration-tests/artifacts/gatsby-browser.js
+++ b/integration-tests/artifacts/gatsby-browser.js
@@ -3,7 +3,8 @@ const { useMoreInfoQuery } = require("./src/hooks/use-more-info-query")
 const Github = require(`./src/components/github`).default
 
 // global css import (make sure warm rebuild doesn't invalidate every file when css is imported)
-require("./imported.css")
+// TODO: Uncomment imported.css to test issue https://github.com/gatsbyjs/gatsby/issues/33450
+// require("./imported.css")
 
 exports.wrapRootElement = ({ element }) => {
   return (
diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js
index 767e367fcf651..0845a60649f21 100644
--- a/packages/gatsby-plugin-less/src/gatsby-node.js
+++ b/packages/gatsby-plugin-less/src/gatsby-node.js
@@ -34,7 +34,6 @@ exports.onCreateWebpackConfig = (
   }
   const lessRuleModules = {
     test: /\.module\.less$/,
-    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({
diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json
index 31b30e001eace..e19da9e879026 100644
--- a/packages/gatsby-plugin-netlify-cms/package.json
+++ b/packages/gatsby-plugin-netlify-cms/package.json
@@ -14,7 +14,7 @@
     "html-webpack-skip-assets-plugin": "^1.0.3",
     "html-webpack-tags-plugin": "^3.0.2",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.4.4",
+    "mini-css-extract-plugin": "1.6.2",
     "netlify-identity-widget": "^1.9.2"
   },
   "devDependencies": {
diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js
index 366a6c541482a..98ef0bfbb7a58 100644
--- a/packages/gatsby-plugin-postcss/src/gatsby-node.js
+++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js
@@ -50,7 +50,6 @@ exports.onCreateWebpackConfig = (
   }
   const postcssRuleModules = {
     test: MODULE_CSS_PATTERN,
-    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({
diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js
index 0512a17869a53..dc8bd2f05be7b 100644
--- a/packages/gatsby-plugin-sass/src/gatsby-node.js
+++ b/packages/gatsby-plugin-sass/src/gatsby-node.js
@@ -43,7 +43,6 @@ exports.onCreateWebpackConfig = (
 
   const sassRuleModules = {
     test: sassRuleModulesTest || /\.module\.s(a|c)ss$/,
-    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({
diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js
index 9036c39d50886..2a8e9425c17f0 100644
--- a/packages/gatsby-plugin-stylus/src/gatsby-node.js
+++ b/packages/gatsby-plugin-stylus/src/gatsby-node.js
@@ -54,7 +54,6 @@ exports.onCreateWebpackConfig = (
 
   const stylusRuleModules = {
     test: /\.module\.styl$/,
-    // TODO(v5): Remove obsolete modules option from miniCssExtract
     use: [
       !isSSR &&
         loaders.miniCssExtract({
diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json
index cdc2e2fead4da..2784bf399f531 100644
--- a/packages/gatsby/package.json
+++ b/packages/gatsby/package.json
@@ -48,7 +48,7 @@
     "cookie": "^0.4.1",
     "core-js": "^3.17.2",
     "cors": "^2.8.5",
-    "css-loader": "^6.5.1",
+    "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "css.escape": "^1.5.1",
     "date-fns": "^2.25.0",
@@ -108,7 +108,7 @@
     "memoizee": "^0.4.15",
     "micromatch": "^4.0.4",
     "mime": "^2.5.2",
-    "mini-css-extract-plugin": "^2.4.4",
+    "mini-css-extract-plugin": "1.6.2",
     "mitt": "^1.2.0",
     "moment": "^2.29.1",
     "multer": "^1.4.3",
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
index 6d1449e4c4add..5e0fd428fd3bb 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/packages/gatsby/src/utils/webpack-utils.ts
@@ -1,5 +1,5 @@
 import * as path from "path"
-import { RuleSetRule, WebpackPluginInstance, Configuration } from "webpack"
+import { RuleSetRule, WebpackPluginInstance } from "webpack"
 import { GraphQLSchema } from "graphql"
 import { Plugin as PostCSSPlugin } from "postcss"
 import autoprefixer from "autoprefixer"
@@ -65,16 +65,12 @@ type CSSModulesOptions =
       exportOnlyLocals?: boolean
     }
 
-interface IMiniCSSExtractLoaderModuleOptions {
-  filename?: Required<Configuration>["output"]["filename"] | undefined
-  chunkFilename?: Required<Configuration>["output"]["chunkFilename"] | undefined
-  experimentalUseImportModule?: boolean | undefined
-  ignoreOrder?: boolean | undefined
-  insert?: string | ((linkTag: any) => void) | undefined
-  attributes?: Record<string, string> | undefined
-  linkType?: string | false | "text/css" | undefined
-  runtime?: boolean | undefined
-}
+type MiniCSSExtractLoaderModuleOptions =
+  | undefined
+  | boolean
+  | {
+      namedExport?: boolean
+    }
 /**
  * Utils that produce webpack `loader` objects
  */
@@ -238,13 +234,28 @@ export const createWebpackUtils = (
       }
     },
 
-    miniCssExtract: (options: IMiniCSSExtractLoaderModuleOptions = {}) => {
-      // @ts-ignore - legacy modules
+    // TODO(v5): Re-Apply https://github.com/gatsbyjs/gatsby/pull/33979 with breaking change in inline loader syntax
+    miniCssExtract: (
+      options: {
+        modules?: MiniCSSExtractLoaderModuleOptions
+      } = {}
+    ) => {
+      let moduleOptions: MiniCSSExtractLoaderModuleOptions = undefined
+
       const { modules, ...restOptions } = options
 
+      if (typeof modules === `boolean` && options.modules) {
+        moduleOptions = {
+          namedExport: true,
+        }
+      } else {
+        moduleOptions = modules
+      }
+
       return {
         loader: MiniCssExtractPlugin.loader,
         options: {
+          modules: moduleOptions,
           ...restOptions,
         },
       }
@@ -273,15 +284,13 @@ export const createWebpackUtils = (
         loader: require.resolve(`css-loader`),
         options: {
           // Absolute urls (https or //) are not send to this function. Only resolvable paths absolute or relative ones.
-          url: {
-            filter: function (url: string): boolean {
-              // When an url starts with /
-              if (url.startsWith(`/`)) {
-                return false
-              }
-
-              return true
-            },
+          url: function (url: string): boolean {
+            // When an url starts with /
+            if (url.startsWith(`/`)) {
+              return false
+            }
+
+            return true
           },
           sourceMap: !PRODUCTION,
           modules: modulesOptions,
@@ -342,7 +351,6 @@ export const createWebpackUtils = (
       }
     },
 
-    // TODO(v5): Consider removing this (as not used anymore internally)
     url: (options = {}) => {
       return {
         loader: require.resolve(`url-loader`),
@@ -538,11 +546,8 @@ export const createWebpackUtils = (
    */
   rules.fonts = (): RuleSetRule => {
     return {
+      use: [loaders.url()],
       test: /\.(eot|otf|ttf|woff(2)?)(\?.*)?$/,
-      type: `asset/resource`,
-      generator: {
-        filename: `${assetRelativeRoot}[name]-[hash][ext]`,
-      },
     }
   }
 
@@ -552,11 +557,8 @@ export const createWebpackUtils = (
    */
   rules.images = (): RuleSetRule => {
     return {
+      use: [loaders.url()],
       test: /\.(ico|svg|jpg|jpeg|png|gif|webp|avif)(\?.*)?$/,
-      type: `asset/resource`,
-      generator: {
-        filename: `${assetRelativeRoot}[name]-[hash][ext]`,
-      },
     }
   }
 
@@ -566,11 +568,8 @@ export const createWebpackUtils = (
    */
   rules.media = (): RuleSetRule => {
     return {
+      use: [loaders.url()],
       test: /\.(mp4|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/,
-      type: `asset/resource`,
-      generator: {
-        filename: `${assetRelativeRoot}[name]-[hash][ext]`,
-      },
     }
   }
 
diff --git a/yarn.lock b/yarn.lock
index 31955cabb65c9..3c14fb9afe757 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7930,10 +7930,26 @@ css-list-helpers@^2.0.0:
   resolved "https://registry.yarnpkg.com/css-list-helpers/-/css-list-helpers-2.0.0.tgz#7cb3d6f9ec9e5087ae49d834cead282806e8818f"
   integrity sha512-9Bj8tZ0jWbAM3u/U6m/boAzAwLPwtjzFvwivr2piSvyVa3K3rChJzQy4RIHkNkKiZCHrEMWDJWtTR8UyVhdDnQ==
 
-css-loader@^6.2.0, css-loader@^6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.5.1.tgz#0c43d4fbe0d97f699c91e9818cb585759091d1b1"
-  integrity sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==
+css-loader@^5.2.7:
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae"
+  integrity sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==
+  dependencies:
+    icss-utils "^5.1.0"
+    loader-utils "^2.0.0"
+    postcss "^8.2.15"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.1.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.5"
+
+css-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.2.0.tgz#9663d9443841de957a3cb9bcea2eda65b3377071"
+  integrity sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==
   dependencies:
     icss-utils "^5.1.0"
     postcss "^8.2.15"
@@ -15996,12 +16012,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.4.tgz#c7e5d2d931dcf100ae50ae949ba757c506b54b0f"
-  integrity sha512-UJ+aNuFQaQaECu7AamlWOBLj2cJ6XSGU4zNiqXeZ7lZLe5VD0DoSPWFbWArXueo+6FZVbgHzpX9lUIaBIDLuYg==
+mini-css-extract-plugin@1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
+  integrity sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==
   dependencies:
-    schema-utils "^3.1.0"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+    webpack-sources "^1.1.0"
 
 mini-svg-data-uri@^1.4.3:
   version "1.4.3"
@@ -21760,6 +21778,11 @@ source-list-map@^1.1.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
   integrity sha1-mIkBnRAkzOVc3AaUmDN+9hhqEaE=
 
+source-list-map@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
 source-map-js@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
@@ -24556,6 +24579,14 @@ webpack-sources@^0.2.0:
     source-list-map "^1.1.1"
     source-map "~0.5.3"
 
+webpack-sources@^1.1.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
 webpack-sources@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.0.tgz#b16973bcf844ebcdb3afde32eda1c04d0b90f89d"