diff --git a/package.json b/package.json
index acd2e9c430e4..2d37dcb16bf3 100644
--- a/package.json
+++ b/package.json
@@ -209,7 +209,7 @@
     "speed-measure-webpack-plugin": "1.3.3",
     "style-loader": "1.3.0",
     "stylus": "0.54.7",
-    "stylus-loader": "3.0.2",
+    "stylus-loader": "4.1.0",
     "symbol-observable": "2.0.3",
     "tar": "^6.0.0",
     "temp": "^0.9.0",
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
index 220b1a07f838..0eff801f121a 100644
--- a/packages/angular_devkit/build_angular/package.json
+++ b/packages/angular_devkit/build_angular/package.json
@@ -64,7 +64,7 @@
     "speed-measure-webpack-plugin": "1.3.3",
     "style-loader": "1.3.0",
     "stylus": "0.54.8",
-    "stylus-loader": "3.0.2",
+    "stylus-loader": "4.1.0",
     "terser": "5.3.4",
     "terser-webpack-plugin": "4.2.2",
     "text-table": "0.2.0",
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
index 74bde097204f..be300ff1767b 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -38,21 +38,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);
 
   // use includePaths from appConfig
-  const includePaths: string[] = [];
-  let lessPathOptions: { paths?: string[] } = {};
-
-  if (
-    buildOptions.stylePreprocessorOptions &&
-    buildOptions.stylePreprocessorOptions.includePaths &&
-    buildOptions.stylePreprocessorOptions.includePaths.length > 0
-  ) {
-    buildOptions.stylePreprocessorOptions.includePaths.forEach((includePath: string) =>
-      includePaths.push(path.resolve(root, includePath)),
-    );
-    lessPathOptions = {
-      paths: includePaths,
-    };
-  }
+  const includePaths = buildOptions.stylePreprocessorOptions?.includePaths?.map(p => path.resolve(root, p)) ?? [];
 
   // Process global styles.
   if (buildOptions.styles.length > 0) {
@@ -138,7 +124,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
             sourceMap: cssSourceMap,
             lessOptions: {
               javascriptEnabled: true,
-              ...lessPathOptions,
+              paths: includePaths,
             },
           },
         },
@@ -156,8 +142,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         {
           loader: require.resolve('stylus-loader'),
           options: {
-            sourceMap: { comment: false },
-            paths: includePaths,
+            sourceMap: cssSourceMap,
+            webpackImporter: false,
+            stylusOptions: {
+              compress: false,
+              sourceMap: { comment: false },
+              paths: includePaths,
+            },
           },
         },
       ],
diff --git a/yarn.lock b/yarn.lock
index 8e96e43fadcd..82ddb5143977 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7502,7 +7502,7 @@ loader-utils@2.0.0, loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -7546,11 +7546,6 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.clonedeep@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
-
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -11694,14 +11689,16 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-stylus-loader@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.2.tgz#27a706420b05a38e038e7cacb153578d450513c6"
-  integrity sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==
+stylus-loader@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-4.1.0.tgz#7b3ced4d153ba8bc73479e775e430ce5c628c687"
+  integrity sha512-phWZyKuuIgzCU0Zbp5se6cOW9MMUogQ4NoBnNe78kytT2gg+25incSv3HHNFkgLvjyLyBxH1q44xx2AN1CeQpw==
   dependencies:
-    loader-utils "^1.0.2"
-    lodash.clonedeep "^4.5.0"
-    when "~3.6.x"
+    fast-glob "^3.2.4"
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    normalize-path "^3.0.0"
+    schema-utils "^2.7.1"
 
 stylus@0.54.7:
   version "0.54.7"
@@ -12940,11 +12937,6 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-when@~3.6.x:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
-  integrity sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"