From 3e984e033383660b0c666eb17ed3166ab1949ea7 Mon Sep 17 00:00:00 2001
From: Alexander Akait <sheo13666q@gmail.com>
Date: Thu, 27 Aug 2026 12:38:34 +0000
Subject: [PATCH 1/2] feat(create-webpack-app): stop asking about HTML and CSS

webpack handles both out of the box, so the templates no longer ask whether
to simplify HTML creation, which CSS solution to use, whether PostCSS is
wanted or whether CSS should be extracted. `index.html` is always the entry
point, a stylesheet is always scaffolded, and one question remains for the
preprocessors webpack does not cover, wired through a `type: "css/auto"`
rule that adds only sass-loader/less-loader/stylus-loader.

Also fixes what the generated projects needed to build and run: `baseUrl`
for the Vue TypeScript `paths`, a fully specified `./router/index.js` import
under `"type": "module"`, Svelte 5's `mount()` instead of `new App()`, and
style-module declarations for the TypeScript templates.
---
 .changeset/init-no-html-css-questions.md      |   5 +
 .cspell.json                                  |   1 +
 packages/create-webpack-app/README.md         |   5 +
 .../src/generators/init/default.ts            |  76 ++---
 .../src/generators/init/react.ts              |  90 ++----
 .../src/generators/init/svelte.ts             |  88 ++----
 .../src/generators/init/vue.ts                |  88 ++----
 packages/create-webpack-app/src/index.ts      |   8 +-
 .../templates/init/default/README.md.tpl      |  17 ++
 .../templates/init/default/index.html.tpl     |   5 +-
 .../init/default/postcss.config.js.tpl        |   7 -
 .../templates/init/default/src/styles.css.tpl |   7 +
 .../init/default/src/styles.less.tpl          |  10 +
 .../init/default/src/styles.scss.tpl          |  10 +
 .../init/default/src/styles.styl.tpl          |   9 +
 .../templates/init/default/webpack.config.tpl |  24 +-
 .../templates/init/react/README.md.tpl        |   7 +
 .../templates/init/react/index.d.ts.tpl       |   4 +
 .../templates/init/react/src/index.jsx.tpl    |   6 +-
 .../templates/init/react/src/index.tsx.tpl    |   6 +-
 .../templates/init/react/webpack.config.tpl   |  24 +-
 .../templates/init/svelte/README.md.tpl       |   7 +
 .../templates/init/svelte/src/App.svelte.tpl  |   2 -
 .../templates/init/svelte/src/index.d.ts.tpl  |   5 +
 .../templates/init/svelte/src/main.js.tpl     |   9 +-
 .../templates/init/svelte/src/main.ts.tpl     |  11 +-
 .../templates/init/svelte/webpack.config.tpl  |  24 +-
 .../templates/init/vue/README.md.tpl          |   7 +
 .../templates/init/vue/src/main.js.tpl        |   8 +-
 .../templates/init/vue/src/main.ts.tpl        |   6 +-
 .../templates/init/vue/tsconfig.json.tpl      |   1 +
 .../templates/init/vue/webpack.config.tpl     |  27 +-
 .../__snapshots__/init.test.js.snap.webpack5  | 279 ++++--------------
 test/create-webpack-app/init/init.test.js     | 119 +++-----
 34 files changed, 346 insertions(+), 656 deletions(-)
 create mode 100644 .changeset/init-no-html-css-questions.md
 delete mode 100644 packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
 create mode 100644 packages/create-webpack-app/templates/init/default/src/styles.css.tpl
 create mode 100644 packages/create-webpack-app/templates/init/default/src/styles.less.tpl
 create mode 100644 packages/create-webpack-app/templates/init/default/src/styles.scss.tpl
 create mode 100644 packages/create-webpack-app/templates/init/default/src/styles.styl.tpl

diff --git a/.changeset/init-no-html-css-questions.md b/.changeset/init-no-html-css-questions.md
new file mode 100644
index 00000000000..59e8757d8e7
--- /dev/null
+++ b/.changeset/init-no-html-css-questions.md
@@ -0,0 +1,5 @@
+---
+"create-webpack-app": minor
+---
+
+feat: stop asking about HTML and CSS in `init`, keeping one question for the CSS preprocessors webpack does not cover
diff --git a/.cspell.json b/.cspell.json
index dd262fb97b4..c79593fbea6 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -87,6 +87,7 @@
     "splitted",
     "Statsv",
     "styl",
+    "stylesheet",
     "Tanjiro",
     "tapable",
     "taskkill",
diff --git a/packages/create-webpack-app/README.md b/packages/create-webpack-app/README.md
index 6654d257426..bf1b39d065d 100644
--- a/packages/create-webpack-app/README.md
+++ b/packages/create-webpack-app/README.md
@@ -65,6 +65,11 @@ Available templates:
 - [`vue`](https://vuejs.org/)
 - [`svelte`](https://svelte.dev/)
 
+Every template scaffolds `index.html` as the entry point of the project and relies on
+webpack's built-in HTML and CSS support (webpack >= 5.109), so the generated projects
+carry no `html-webpack-plugin`, `css-loader`, `style-loader` or `mini-css-extract-plugin`.
+A Sass/Less/Stylus project adds only its preprocessor loader.
+
 Available templates for `loader` and `plugin` generators:
 
 - `default` (used by default when nothing specified) - generate bootstrap code
diff --git a/packages/create-webpack-app/src/generators/init/default.ts b/packages/create-webpack-app/src/generators/init/default.ts
index 6175ba86848..fe8ed314b85 100644
--- a/packages/create-webpack-app/src/generators/init/default.ts
+++ b/packages/create-webpack-app/src/generators/init/default.ts
@@ -33,12 +33,6 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
         message: "Would you like to use Webpack Dev server?",
         default: true,
       },
-      {
-        type: "confirm",
-        name: "html",
-        message: "Do you want to simplify the creation of HTML files for your bundle?",
-        default: true,
-      },
       {
         type: "confirm",
         name: "workboxWebpackPlugin",
@@ -47,33 +41,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssPreprocessor",
+        message: "Which CSS preprocessor do you want to use?",
+        choices: ["none", "SASS", "LESS", "Stylus"],
+        default: "none",
       },
       {
         type: "list",
@@ -109,22 +80,22 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      if (answers.isPostCSS) {
-        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
-      }
-
-      if (answers.cssType !== "none") {
-        switch (answers.cssType) {
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+      switch (answers.cssPreprocessor) {
+        case "SASS":
+          answers.styleExtension = "scss";
+          devDependencies.push("sass-loader", "sass");
+          break;
+        case "LESS":
+          answers.styleExtension = "less";
+          devDependencies.push("less-loader", "less");
+          break;
+        case "Stylus":
+          answers.styleExtension = "styl";
+          devDependencies.push("stylus-loader", "stylus");
+          break;
+        default:
+          answers.styleExtension = "css";
+          break;
       }
 
       const files: FileRecord[] = [
@@ -158,9 +129,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
-      if (answers.isPostCSS) {
-        files.push({ filePath: "postcss.config.js", fileType: "text" });
-      }
+      files.push({
+        filePath: `./src/styles.${answers.styleExtension}`,
+        fileType: "text",
+      });
 
       for (const file of files) {
         actions.push({
diff --git a/packages/create-webpack-app/src/generators/init/react.ts b/packages/create-webpack-app/src/generators/init/react.ts
index 69e93ae9532..5b67225fc43 100644
--- a/packages/create-webpack-app/src/generators/init/react.ts
+++ b/packages/create-webpack-app/src/generators/init/react.ts
@@ -49,33 +49,10 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssPreprocessor",
+        message: "Which CSS preprocessor do you want to use?",
+        choices: ["none", "SASS", "LESS", "Stylus"],
+        default: "none",
       },
       {
         type: "list",
@@ -94,7 +71,6 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
-      answers.html = true;
       answers.devServer = true;
       switch (answers.langType) {
         case "ES6":
@@ -109,32 +85,28 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
           devDependencies.push("typescript", "ts-loader", "@types/react", "@types/react-dom");
           break;
       }
-      if (answers.isPostCSS) {
-        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
-      }
-      if (answers.cssType === "none") {
-        answers.isCSS = false;
-        answers.isPostCSS = false;
-      } else {
-        switch (answers.cssType) {
-          case "CSS only":
-            answers.isCSS = true;
-            break;
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
-      }
       if (answers.workboxWebpackPlugin) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
+      switch (answers.cssPreprocessor) {
+        case "SASS":
+          answers.styleExtension = "scss";
+          devDependencies.push("sass-loader", "sass");
+          break;
+        case "LESS":
+          answers.styleExtension = "less";
+          devDependencies.push("less-loader", "less");
+          break;
+        case "Stylus":
+          answers.styleExtension = "styl";
+          devDependencies.push("stylus-loader", "stylus");
+          break;
+        default:
+          answers.styleExtension = "css";
+          break;
+      }
+
       const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
         {
@@ -173,20 +145,10 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
-      switch (answers.cssType) {
-        case "CSS only":
-          files.push({ filePath: "./src/styles/global.css", fileType: "text" });
-          break;
-        case "SASS":
-          files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
-          break;
-        case "LESS":
-          files.push({ filePath: "./src/styles/global.less", fileType: "text" });
-          break;
-        case "Stylus":
-          files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
-          break;
-      }
+      files.push({
+        filePath: `./src/styles/global.${answers.styleExtension}`,
+        fileType: "text",
+      });
 
       for (const file of files) {
         actions.push({
diff --git a/packages/create-webpack-app/src/generators/init/svelte.ts b/packages/create-webpack-app/src/generators/init/svelte.ts
index 947fa9de2a4..f195df127d0 100644
--- a/packages/create-webpack-app/src/generators/init/svelte.ts
+++ b/packages/create-webpack-app/src/generators/init/svelte.ts
@@ -40,33 +40,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssPreprocessor",
+        message: "Which CSS preprocessor do you want to use?",
+        choices: ["none", "SASS", "LESS", "Stylus"],
+        default: "none",
       },
       {
         type: "list",
@@ -85,7 +62,6 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
-      answers.html = true;
       answers.devServer = true;
 
       switch (answers.langType) {
@@ -97,32 +73,26 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
-      if (answers.isPostCSS) {
-        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
-      }
-
       if (answers.workboxWebpackPlugin) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      if (answers.cssType === "none") {
-        answers.isCSS = false;
-        answers.isPostCSS = false;
-      } else {
-        switch (answers.cssType) {
-          case "CSS only":
-            answers.isCSS = true;
-            break;
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+      switch (answers.cssPreprocessor) {
+        case "SASS":
+          answers.styleExtension = "scss";
+          devDependencies.push("sass-loader", "sass");
+          break;
+        case "LESS":
+          answers.styleExtension = "less";
+          devDependencies.push("less-loader", "less");
+          break;
+        case "Stylus":
+          answers.styleExtension = "styl";
+          devDependencies.push("stylus-loader", "stylus");
+          break;
+        default:
+          answers.styleExtension = "css";
+          break;
       }
 
       const files: FileRecord[] = [
@@ -159,20 +129,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
         files.push({ filePath: "./src/store/index.js", fileType: "text" });
       }
 
-      switch (answers.cssType) {
-        case "CSS only":
-          files.push({ filePath: "./src/styles/global.css", fileType: "text" });
-          break;
-        case "SASS":
-          files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
-          break;
-        case "LESS":
-          files.push({ filePath: "./src/styles/global.less", fileType: "text" });
-          break;
-        case "Stylus":
-          files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
-          break;
-      }
+      files.push({
+        filePath: `./src/styles/global.${answers.styleExtension}`,
+        fileType: "text",
+      });
 
       for (const file of files) {
         actions.push({
diff --git a/packages/create-webpack-app/src/generators/init/vue.ts b/packages/create-webpack-app/src/generators/init/vue.ts
index edc3b43a648..889749826db 100644
--- a/packages/create-webpack-app/src/generators/init/vue.ts
+++ b/packages/create-webpack-app/src/generators/init/vue.ts
@@ -48,33 +48,10 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssPreprocessor",
+        message: "Which CSS preprocessor do you want to use?",
+        choices: ["none", "SASS", "LESS", "Stylus"],
+        default: "none",
       },
       {
         type: "list",
@@ -93,7 +70,6 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
-      answers.html = true;
       answers.devServer = true;
 
       switch (answers.langType) {
@@ -109,32 +85,26 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("pinia");
       }
 
-      if (answers.isPostCSS) {
-        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
-      }
-
       if (answers.workboxWebpackPlugin) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      if (answers.cssType === "none") {
-        answers.isCSS = false;
-        answers.isPostCSS = false;
-      } else {
-        switch (answers.cssType) {
-          case "CSS only":
-            answers.isCSS = true;
-            break;
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+      switch (answers.cssPreprocessor) {
+        case "SASS":
+          answers.styleExtension = "scss";
+          devDependencies.push("sass-loader", "sass");
+          break;
+        case "LESS":
+          answers.styleExtension = "less";
+          devDependencies.push("less-loader", "less");
+          break;
+        case "Stylus":
+          answers.styleExtension = "styl";
+          devDependencies.push("stylus-loader", "stylus");
+          break;
+        default:
+          answers.styleExtension = "css";
+          break;
       }
 
       const files: FileRecord[] = [
@@ -181,20 +151,10 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
         }
       }
 
-      switch (answers.cssType) {
-        case "CSS only":
-          files.push({ filePath: "./src/styles/global.css", fileType: "text" });
-          break;
-        case "SASS":
-          files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
-          break;
-        case "LESS":
-          files.push({ filePath: "./src/styles/global.less", fileType: "text" });
-          break;
-        case "Stylus":
-          files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
-          break;
-      }
+      files.push({
+        filePath: `./src/styles/global.${answers.styleExtension}`,
+        fileType: "text",
+      });
 
       for (const file of files) {
         actions.push({
diff --git a/packages/create-webpack-app/src/index.ts b/packages/create-webpack-app/src/index.ts
index 795cb913f13..90ddfd246e0 100644
--- a/packages/create-webpack-app/src/index.ts
+++ b/packages/create-webpack-app/src/index.ts
@@ -17,11 +17,8 @@ const baseAnswers: Answers = {
   projectPath: process.cwd(),
   langType: "none",
   devServer: true,
-  html: true,
   workboxWebpackPlugin: true,
-  cssType: "none",
-  isCSS: false,
-  isPostCSS: false,
+  cssPreprocessor: "none",
   packageManager: "npm",
 };
 const initValues: Record<string, Answers> = {
@@ -32,18 +29,15 @@ const initValues: Record<string, Answers> = {
     ...baseAnswers,
     langType: "ES6",
     useReactState: true,
-    cssType: "CSS only",
   },
   vue: {
     ...baseAnswers,
     langType: "ES6",
     useVueStore: true,
-    cssType: "CSS only",
   },
   svelte: {
     ...baseAnswers,
     langType: "ES6",
-    cssType: "CSS only",
   },
 };
 
diff --git a/packages/create-webpack-app/templates/init/default/README.md.tpl b/packages/create-webpack-app/templates/init/default/README.md.tpl
index 77c91681f17..56d88cd4933 100644
--- a/packages/create-webpack-app/templates/init/default/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/default/README.md.tpl
@@ -13,3 +13,20 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
+
+A preprocessor keeps that support and only adds its own loader, e.g. for Sass:
+
+```js
+{
+    test: /\.s[ac]ss$/i,
+    type: "css/auto",
+    use: ["sass-loader"],
+}
+```
diff --git a/packages/create-webpack-app/templates/init/default/index.html.tpl b/packages/create-webpack-app/templates/init/default/index.html.tpl
index 4cf8cdb1986..099b4addcd9 100644
--- a/packages/create-webpack-app/templates/init/default/index.html.tpl
+++ b/packages/create-webpack-app/templates/init/default/index.html.tpl
@@ -3,11 +3,12 @@
     <head>
         <meta charset="utf-8" />
         <title>Webpack App</title>
+        <link rel="stylesheet" href="./src/styles.<%= styleExtension %>" />
+        <script defer src="<%= entryPoint %>"></script>
     </head>
     <body>
         <h1>Hello world!</h1>
-        <h2>Tip: Check your console</h2><% if (html) { %>
-        <script src="<%= entryPoint %>"></script><% } %>
+        <h2>Tip: Check your console</h2>
     </body>
     <% if (workboxWebpackPlugin) { %>
     <script>
diff --git a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
deleted file mode 100644
index dbcbc93781b..00000000000
--- a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
+++ /dev/null
@@ -1,7 +0,0 @@
-import autoprefixer from "autoprefixer";
-
-export default {
-  // Add you postcss configuration here
-  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
-  plugins: [["autoprefixer"]],
-};
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.css.tpl b/packages/create-webpack-app/templates/init/default/src/styles.css.tpl
new file mode 100644
index 00000000000..92993a7b3a0
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.css.tpl
@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    color: #1c78c0;
+    background-color: #f5f7fa;
+}
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.less.tpl b/packages/create-webpack-app/templates/init/default/src/styles.less.tpl
new file mode 100644
index 00000000000..be028fcce23
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.less.tpl
@@ -0,0 +1,10 @@
+@color-primary: #1c78c0;
+@color-background: #f5f7fa;
+
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    color: @color-primary;
+    background-color: @color-background;
+}
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.scss.tpl b/packages/create-webpack-app/templates/init/default/src/styles.scss.tpl
new file mode 100644
index 00000000000..c3019025fef
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.scss.tpl
@@ -0,0 +1,10 @@
+$color-primary: #1c78c0;
+$color-background: #f5f7fa;
+
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    color: $color-primary;
+    background-color: $color-background;
+}
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.styl.tpl b/packages/create-webpack-app/templates/init/default/src/styles.styl.tpl
new file mode 100644
index 00000000000..fd956493c0d
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.styl.tpl
@@ -0,0 +1,9 @@
+color-primary = #1c78c0
+color-background = #f5f7fa
+
+body
+    margin 0
+    padding 2rem
+    font-family system-ui, sans-serif
+    color color-primary
+    background-color color-background
diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
index 4433cf9d792..126c3dcc573 100644
--- a/packages/create-webpack-app/templates/init/default/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
@@ -12,15 +12,14 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entryPoint %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
-    },<% } %><% if (isCSS && isPostCSS) { %>
-    experiments: {
-        css: true,
     },<% } %>
     plugins: [
         // Add your plugins here
@@ -36,26 +35,21 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 test: /\.(ts|tsx)$/i,
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (isCSS && isPostCSS) { %>
-            {
-                test: /\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (cssPreprocessor == "SASS") { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: ["sass-loader"],
+            },<% } %><%  if (cssPreprocessor == "LESS") { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: ["less-loader"],
+            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: ["stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/packages/create-webpack-app/templates/init/react/README.md.tpl b/packages/create-webpack-app/templates/init/react/README.md.tpl
index 77c91681f17..e5d0964ac16 100644
--- a/packages/create-webpack-app/templates/init/react/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/react/README.md.tpl
@@ -13,3 +13,10 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
diff --git a/packages/create-webpack-app/templates/init/react/index.d.ts.tpl b/packages/create-webpack-app/templates/init/react/index.d.ts.tpl
index 38ee1835c96..2e6f51f2c0b 100644
--- a/packages/create-webpack-app/templates/init/react/index.d.ts.tpl
+++ b/packages/create-webpack-app/templates/init/react/index.d.ts.tpl
@@ -1,3 +1,7 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.less";
+declare module "*.styl";
 declare module "*.png";
 declare module "*.jpg";
 declare module "*.gif";
diff --git a/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl b/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl
index 850922b4db8..3c163ea2e0e 100644
--- a/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl
+++ b/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl
@@ -1,11 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 const container = document.getElementById('root');
 const root = createRoot(container);
diff --git a/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl b/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl
index e2437f31bf1..b00d65c79e0 100644
--- a/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl
+++ b/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl
@@ -1,11 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
diff --git a/packages/create-webpack-app/templates/init/react/webpack.config.tpl b/packages/create-webpack-app/templates/init/react/webpack.config.tpl
index 39c42a54796..c7d77fd3957 100644
--- a/packages/create-webpack-app/templates/init/react/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/react/webpack.config.tpl
@@ -12,15 +12,14 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entry %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
-    },<% } %><% if (isCSS && isPostCSS) { %>
-    experiments: {
-        css: true,
     },<% } %>
     plugins: [
         // Add your plugins here
@@ -42,26 +41,21 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 test: /\.(ts|tsx)$/i,
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (isCSS && isPostCSS) { %>
-            {
-                test: /\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (cssPreprocessor == "SASS") { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: ["sass-loader"],
+            },<% } %><%  if (cssPreprocessor == "LESS") { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: ["less-loader"],
+            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: ["stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/packages/create-webpack-app/templates/init/svelte/README.md.tpl b/packages/create-webpack-app/templates/init/svelte/README.md.tpl
index 77c91681f17..e5d0964ac16 100644
--- a/packages/create-webpack-app/templates/init/svelte/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/README.md.tpl
@@ -13,3 +13,10 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
diff --git a/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl b/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl
index b6df249e87a..bd432615b52 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl
@@ -15,7 +15,6 @@
   </div>
 </main>
 
-<% if (isCSS) { %>
 <style>
   :root {
     --color-primary: #1C78C0;
@@ -46,4 +45,3 @@
     background-color: #6EB8E0;
   }
 </style>
-<% } %>
diff --git a/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl b/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl
index d8c267b25a1..f2cecb9e3bc 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl
@@ -1,3 +1,8 @@
 declare module '*.svelte' {
     export { SvelteComponentDev as default } from 'svelte/internal';
 }
+
+declare module '*.css';
+declare module '*.scss';
+declare module '*.less';
+declare module '*.styl';
diff --git a/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl b/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl
index 58e2b6bc94e..39eceaa80bd 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl
@@ -1,13 +1,10 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app'),
 });
 
diff --git a/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl b/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl
index 58e2b6bc94e..c23608c1359 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl
@@ -1,14 +1,11 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
-const app = new App({
-  target: document.getElementById('app'),
+const app = mount(App, {
+  target: document.getElementById('app') as HTMLElement,
 });
 
 export default app;
diff --git a/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl b/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
index ad15067e9be..30f3799ded4 100644
--- a/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
@@ -12,15 +12,14 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entry %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
-    },<% } %><% if (isCSS && isPostCSS) { %>
-    experiments: {
-        css: true,
     },<% } %>
     plugins: [
         // Add your plugins here
@@ -55,26 +54,21 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 options: {
                     appendTsSuffixTo: [/\.svelte$/],
                 },
-            },<% } %><%  if (isCSS && isPostCSS) { %>
-            {
-                test: /\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (cssPreprocessor == "SASS") { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: ["sass-loader"],
+            },<% } %><%  if (cssPreprocessor == "LESS") { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: ["less-loader"],
+            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: ["stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/packages/create-webpack-app/templates/init/vue/README.md.tpl b/packages/create-webpack-app/templates/init/vue/README.md.tpl
index 77c91681f17..e5d0964ac16 100644
--- a/packages/create-webpack-app/templates/init/vue/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/vue/README.md.tpl
@@ -13,3 +13,10 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
diff --git a/packages/create-webpack-app/templates/init/vue/src/main.js.tpl b/packages/create-webpack-app/templates/init/vue/src/main.js.tpl
index bc26c6d6d6e..b2dfc933cf0 100644
--- a/packages/create-webpack-app/templates/init/vue/src/main.js.tpl
+++ b/packages/create-webpack-app/templates/init/vue/src/main.js.tpl
@@ -1,15 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './router/index.js'
 <% if (useVueStore) { %>
   import { createPinia } from 'pinia'
   const store = createPinia()
 <% } %>
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
 const app = createApp(App)
diff --git a/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl b/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl
index bc26c6d6d6e..503c2f893b9 100644
--- a/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl
+++ b/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl
@@ -5,11 +5,7 @@ import router from './router'
   import { createPinia } from 'pinia'
   const store = createPinia()
 <% } %>
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
 const app = createApp(App)
diff --git a/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl b/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
index 7730063adac..90bc2fe11ca 100644
--- a/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
+++ b/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
@@ -14,6 +14,7 @@
     "erasableSyntaxOnly": true,
     "isolatedModules": true,
     "rewriteRelativeImportExtensions": true,
+    "baseUrl": ".",
     "types": [
       "webpack-env",
       "vue-router"
diff --git a/packages/create-webpack-app/templates/init/vue/webpack.config.tpl b/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
index c7775182e22..69940c6f2cd 100644
--- a/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
@@ -13,16 +13,20 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entry %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
     },<% } %>
+    // vue-loader rewrites `module.rules`, which hides from webpack that no rule
+    // handles `.html`/`.css` — so ask for the built-in support explicitly
     experiments: {
-        css: true,<% if (html) { %>
-        html: true,<% } %>
+        css: true,
+        html: true,
     },
     plugins: [
         new VueLoaderPlugin(),
@@ -56,26 +60,21 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                     transpileOnly: true,
                 },
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (isCSS && isPostCSS) { %>
-            {
-                test: /\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (cssPreprocessor == "SASS") { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: ["sass-loader"],
+            },<% } %><%  if (cssPreprocessor == "LESS") { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: ["less-loader"],
+            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: ["stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
index 4fe4ac80233..626253d39d9 100644
--- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
+++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
@@ -74,7 +74,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -109,68 +111,6 @@ export default () => {
 "
 `;
 
-exports[`create-webpack-app cli should configure native HTML support as opted 1`] = `
-{
-  "description": "My webpack project",
-  "devDependencies": {
-    "webpack": "x.x.x",
-    "webpack-cli": "x.x.x",
-  },
-  "name": "webpack-project",
-  "scripts": {
-    "build": "webpack --mode=production --config-node-env=production",
-    "build:dev": "webpack --mode=development",
-    "watch": "webpack --watch",
-  },
-  "type": "module",
-  "version": "1.0.0",
-}
-`;
-
-exports[`create-webpack-app cli should configure native HTML support as opted 2`] = `
-"// Generated using webpack-cli https://github.com/webpack/webpack-cli
-
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const isProduction = process.env.NODE_ENV === "production";
-
-/** @type {import("webpack").Configuration} */
-const config = {
-    entry: "./index.html",
-    output: {
-        path: path.resolve(__dirname, "dist"),
-    },
-    plugins: [
-        // Add your plugins here
-        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
-    ],
-    module: {
-        rules: [
-            {
-                test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
-                type: "asset",
-            },
-
-            // Add your rules for custom modules here
-            // Learn more about loaders from https://webpack.js.org/loaders/
-        ],
-    },
-};
-
-export default () => {
-    if (isProduction) {
-        config.mode = "production";
-    } else {
-        config.mode = "development";
-    }
-    return config;
-};
-"
-`;
-
 exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted 1`] = `
 {
   "description": "My webpack project",
@@ -203,7 +143,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -269,7 +211,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -339,7 +283,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -409,7 +355,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -479,7 +427,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -549,7 +499,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -619,7 +571,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -705,10 +659,7 @@ exports[`create-webpack-app cli should generate react template with state and ro
     "@babel/preset-env": "x.x.x",
     "@babel/preset-react": "x.x.x",
     "@types/react-router-dom": "x.x.x",
-    "autoprefixer": "x.x.x",
     "babel-loader": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "react": "x.x.x",
     "react-dom": "x.x.x",
     "react-router-dom": "x.x.x",
@@ -742,16 +693,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -768,11 +718,6 @@ const config = {
                     },
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
@@ -809,9 +754,6 @@ exports[`create-webpack-app cli should generate react template with typescript 1
     "@types/react": "x.x.x",
     "@types/react-dom": "x.x.x",
     "@types/react-router-dom": "x.x.x",
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "react": "x.x.x",
     "react-dom": "x.x.x",
     "react-router-dom": "x.x.x",
@@ -849,16 +791,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -870,11 +811,6 @@ const config : Configuration = {
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
@@ -910,10 +846,7 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ
   "devDependencies": {
     "@babel/core": "x.x.x",
     "@babel/preset-env": "x.x.x",
-    "autoprefixer": "x.x.x",
     "babel-loader": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "svelte": "x.x.x",
     "svelte-loader": "x.x.x",
     "webpack": "x.x.x",
@@ -946,16 +879,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -982,11 +914,6 @@ const config = {
                     },
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
@@ -1022,9 +949,6 @@ exports[`create-webpack-app cli should generate svelte template with typescript
   "description": "My webpack project",
   "devDependencies": {
     "@tsconfig/svelte": "x.x.x",
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "svelte": "x.x.x",
     "svelte-loader": "x.x.x",
     "ts-loader": "x.x.x",
@@ -1061,16 +985,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -1095,11 +1018,6 @@ const config : Configuration = {
                     appendTsSuffixTo: [/\\.svelte$/],
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
@@ -1163,7 +1081,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./src/index.ts",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -1210,11 +1130,8 @@ exports[`create-webpack-app cli should generate vue template with store and rout
     "@babel/core": "x.x.x",
     "@babel/preset-env": "x.x.x",
     "@vue/compiler-sfc": "x.x.x",
-    "autoprefixer": "x.x.x",
     "babel-loader": "x.x.x",
     "pinia": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "vue": "x.x.x",
     "vue-loader": "x.x.x",
     "vue-router": "x.x.x",
@@ -1249,13 +1166,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
+    // vue-loader rewrites \`module.rules\`, which hides from webpack that no rule
+    // handles \`.html\`/\`.css\` — so ask for the built-in support explicitly
     experiments: {
         css: true,
         html: true,
@@ -1284,11 +1205,6 @@ const config = {
                     },
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
@@ -1321,10 +1237,7 @@ exports[`create-webpack-app cli should generate vue template with typescript 1`]
   "description": "My webpack project",
   "devDependencies": {
     "@vue/compiler-sfc": "x.x.x",
-    "autoprefixer": "x.x.x",
     "pinia": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "ts-loader": "x.x.x",
     "typescript": "x.x.x",
     "vue": "x.x.x",
@@ -1363,13 +1276,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
+    // vue-loader rewrites \`module.rules\`, which hides from webpack that no rule
+    // handles \`.html\`/\`.css\` — so ask for the built-in support explicitly
     experiments: {
         css: true,
         html: true,
@@ -1397,11 +1314,6 @@ const config : Configuration = {
                 },
                 exclude: ["/node_modules/"],
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
@@ -1430,93 +1342,10 @@ export default () => {
 "
 `;
 
-exports[`create-webpack-app cli should use css preprocessor and css with postcss in project when selected 1`] = `
-{
-  "description": "My webpack project",
-  "devDependencies": {
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
-    "sass": "x.x.x",
-    "sass-loader": "x.x.x",
-    "webpack": "x.x.x",
-    "webpack-cli": "x.x.x",
-  },
-  "name": "webpack-project",
-  "scripts": {
-    "build": "webpack --mode=production --config-node-env=production",
-    "build:dev": "webpack --mode=development",
-    "watch": "webpack --watch",
-  },
-  "type": "module",
-  "version": "1.0.0",
-}
-`;
-
-exports[`create-webpack-app cli should use css preprocessor and css with postcss in project when selected 2`] = `
-"// Generated using webpack-cli https://github.com/webpack/webpack-cli
-
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const isProduction = process.env.NODE_ENV === "production";
-
-/** @type {import("webpack").Configuration} */
-const config = {
-    entry: "./src/index.js",
-    output: {
-        path: path.resolve(__dirname, "dist"),
-    },
-    experiments: {
-        css: true,
-    },
-    plugins: [
-        // Add your plugins here
-        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
-    ],
-    module: {
-        rules: [
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
-            {
-                test: /\\.s[ac]ss$/i,
-                type: "css/auto",
-                use: ["postcss-loader", "sass-loader"],
-            },
-            {
-                test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
-                type: "asset",
-            },
-
-            // Add your rules for custom modules here
-            // Learn more about loaders from https://webpack.js.org/loaders/
-        ],
-    },
-};
-
-export default () => {
-    if (isProduction) {
-        config.mode = "production";
-    } else {
-        config.mode = "development";
-    }
-    return config;
-};
-"
-`;
-
-exports[`create-webpack-app cli should use css preprocessor with postcss in project when selected 1`] = `
+exports[`create-webpack-app cli should scaffold a preprocessor through the built-in CSS support when selected 1`] = `
 {
   "description": "My webpack project",
   "devDependencies": {
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "sass": "x.x.x",
     "sass-loader": "x.x.x",
     "webpack": "x.x.x",
@@ -1533,7 +1362,7 @@ exports[`create-webpack-app cli should use css preprocessor with postcss in proj
 }
 `;
 
-exports[`create-webpack-app cli should use css preprocessor with postcss in project when selected 2`] = `
+exports[`create-webpack-app cli should scaffold a preprocessor through the built-in CSS support when selected 2`] = `
 "// Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
@@ -1545,7 +1374,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -1558,7 +1389,7 @@ const config = {
             {
                 test: /\\.s[ac]ss$/i,
                 type: "css/auto",
-                use: ["postcss-loader", "sass-loader"],
+                use: ["sass-loader"],
             },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/test/create-webpack-app/init/init.test.js b/test/create-webpack-app/init/init.test.js
index 111475090ad..76ea6927528 100644
--- a/test/create-webpack-app/init/init.test.js
+++ b/test/create-webpack-app/init/init.test.js
@@ -9,7 +9,6 @@ jest.setTimeout(480000);
 const { run, runPromptWithAnswers } = createPathDependentUtils("create-webpack-app");
 
 const ENTER = "\u000D";
-const UP = "\u001B\u005B\u0041";
 const DOWN = "\u001B\u005B\u0042";
 
 const defaultTemplateFiles = [
@@ -167,8 +166,7 @@ describe("create-webpack-app cli", () => {
         `${DOWN}${ENTER}`,
         `n${ENTER}`,
         `n${ENTER}`,
-        `n${ENTER}`,
-        `${UP}${ENTER}`,
+        ENTER,
         ENTER,
         // test for conflicts
         `y${ENTER}`,
@@ -299,7 +297,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [`${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [`${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -331,7 +329,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [`${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [`${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -352,23 +350,14 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
-  it("should use css preprocessor with postcss in project when selected", async () => {
+  it("should configure WDS as opted", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [
-        ENTER,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `${DOWN}${ENTER}`,
-        `n${ENTER}`,
-        `y${ENTER}`,
-        ENTER,
-        ENTER,
-      ],
+      [ENTER, ENTER, `n${ENTER}`, ENTER, ENTER],
     );
 
+    expect(stdout).toContain("Would you like to use Webpack Dev server?");
     expect(stdout).toContain("Project has been initialised with webpack!");
     expect(stdout).toContain("webpack.config.js");
 
@@ -384,78 +373,54 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
-  it("should use css preprocessor and css with postcss in project when selected", async () => {
+  it("should not ask about HTML and CSS, which webpack supports out of the box", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [
-        `${ENTER}`,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `${DOWN}${ENTER}`,
-        `y${ENTER}`,
-        `y${ENTER}`,
-        ENTER,
-        ENTER,
-      ],
+      [ENTER, ENTER, ENTER, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
-    expect(stdout).toContain("webpack.config.js");
-
-    // Test files
-    const files = [...defaultTemplateFiles, "postcss.config.js"];
-
-    for (const file of files) {
-      expect(existsSync(resolve(dir, file))).toBeTruthy();
-    }
-
-    // Check if the generated package.json file content matches the snapshot
-    expect(readFromPkgJSON(dir)).toMatchSnapshot();
-
-    // Check if the generated webpack configuration matches the snapshot
-    expect(readFromWebpackConfig(dir)).toMatchSnapshot();
-  });
-
-  it("should configure WDS as opted", async () => {
-    const { stdout } = await runPromptWithAnswers(
-      dir,
-      ["init", "."],
-      [ENTER, ENTER, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+    expect(stdout).not.toContain(
+      "Do you want to simplify the creation of HTML files for your bundle?",
     );
+    expect(stdout).not.toContain("Which of the following CSS solution do you want to use?");
+    expect(stdout).not.toContain("Do you want to use PostCSS in your project?");
+    expect(stdout).not.toContain("Do you want to extract CSS into separate files?");
 
-    expect(stdout).toContain("Would you like to use Webpack Dev server?");
-    expect(stdout).toContain("Project has been initialised with webpack!");
-    expect(stdout).toContain("webpack.config.js");
+    // The page is the entry, and nothing loads HTML or CSS
+    const config = readFromWebpackConfig(dir);
 
-    // Test files
-    for (const file of defaultTemplateFiles) {
-      expect(existsSync(resolve(dir, file))).toBeTruthy();
-    }
+    expect(config).toContain('entry: { index: "./index.html" }');
+    expect(config).not.toContain("html-webpack-plugin");
+    expect(config).not.toContain("css-loader");
+    expect(config).not.toContain("mini-css-extract-plugin");
 
-    // Check if the generated package.json file content matches the snapshot
-    expect(readFromPkgJSON(dir)).toMatchSnapshot();
+    const { devDependencies } = readFromPkgJSON(dir);
 
-    // Check if the generated webpack configuration matches the snapshot
-    expect(readFromWebpackConfig(dir)).toMatchSnapshot();
+    expect(Object.keys(devDependencies)).not.toContain("html-webpack-plugin");
+    expect(Object.keys(devDependencies)).not.toContain("css-loader");
+    expect(existsSync(resolve(dir, "src/styles.css"))).toBeTruthy();
+    expect(existsSync(resolve(dir, "postcss.config.js"))).toBeFalsy();
   });
 
-  it("should configure native HTML support as opted", async () => {
+  it("should scaffold a preprocessor through the built-in CSS support when selected", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, ENTER, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${ENTER}`, ENTER],
     );
 
-    expect(stdout).toContain("Do you want to simplify the creation of HTML files for your bundle?");
+    expect(stdout).toContain("Which CSS preprocessor do you want to use?");
     expect(stdout).toContain("Project has been initialised with webpack!");
-    expect(stdout).toContain("webpack.config.js");
 
-    // Test files
-    for (const file of defaultTemplateFiles) {
-      expect(existsSync(resolve(dir, file))).toBeTruthy();
-    }
+    // Sass is wired as a `css/auto` rule, so it needs no css-loader
+    const config = readFromWebpackConfig(dir);
+
+    expect(config).toContain('type: "css/auto"');
+    expect(config).toContain('use: ["sass-loader"]');
+    expect(config).not.toContain("css-loader");
+    expect(existsSync(resolve(dir, "src/styles.scss"))).toBeTruthy();
 
     // Check if the generated package.json file content matches the snapshot
     expect(readFromPkgJSON(dir)).toMatchSnapshot();
@@ -468,7 +433,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, ENTER, ENTER, `${UP}${ENTER}`, ENTER],
+      [ENTER, `n${ENTER}`, ENTER, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Do you want to add PWA support?");
@@ -491,7 +456,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, `${DOWN}${ENTER}`],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, ENTER, `${DOWN}${ENTER}`],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -515,7 +480,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=react"],
-      [ENTER, `y${ENTER}`, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER, ENTER],
+      [ENTER, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -537,7 +502,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=react"],
-      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER, ENTER],
+      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -555,7 +520,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=vue"],
-      [ENTER, `y${ENTER}`, `y${ENTER}`, `${ENTER}`, `y${ENTER}`, ENTER, ENTER],
+      [ENTER, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -579,7 +544,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=vue"],
-      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, `${ENTER}`, `y${ENTER}`, ENTER, ENTER],
+      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -597,7 +562,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=svelte"],
-      [ENTER, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER],
+      [ENTER, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -619,7 +584,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=svelte"],
-      [`${DOWN}${ENTER}`, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER],
+      [`${DOWN}${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");

From 5f6c5706c1bc34defb6f81b62aa5ea8fbbcb2774 Mon Sep 17 00:00:00 2001
From: Alexander Akait <sheo13666q@gmail.com>
Date: Thu, 27 Aug 2026 14:30:05 +0000
Subject: [PATCH 2/2] feat(create-webpack-app): keep PostCSS, on its own or
 over a preprocessor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The single CSS question now lists every tool webpack does not cover itself:
PostCSS, Sass, Less, Stylus, and each preprocessor combined with PostCSS.
A preprocessor rule then reads `use: ["postcss-loader", "sass-loader"]`, which
webpack applies right to left, so the stylesheet is compiled first and PostCSS
runs over the result. PostCSS also scaffolds `postcss.config.js` — in every
template now, not just the default one — and asks for `experiments.css`, since
its `.css` rule turns the automatic detection off.

Covers the answer handling with a test that builds each generator's action
list without running it, so all four templates and all eight answers are
exercised in a second instead of an install apiece.
---
 .changeset/init-no-html-css-questions.md      |   2 +-
 packages/create-webpack-app/README.md         |   2 +-
 .../src/generators/init/default.ts            |  66 ++++---
 .../src/generators/init/react.ts              |  66 ++++---
 .../src/generators/init/svelte.ts             |  66 ++++---
 .../src/generators/init/vue.ts                |  66 ++++---
 packages/create-webpack-app/src/index.ts      |   2 +-
 .../templates/init/default/README.md.tpl      |   6 +-
 .../init/default/postcss.config.js.tpl        |   5 +
 .../templates/init/default/webpack.config.tpl |  22 ++-
 .../init/react/postcss.config.js.tpl          |   5 +
 .../templates/init/react/webpack.config.tpl   |  22 ++-
 .../init/svelte/postcss.config.js.tpl         |   5 +
 .../templates/init/svelte/webpack.config.tpl  |  22 ++-
 .../templates/init/vue/postcss.config.js.tpl  |   5 +
 .../templates/init/vue/webpack.config.tpl     |  17 +-
 .../__snapshots__/init.test.js.snap.webpack5  | 161 ++++++++++++++++++
 .../init/generators.test.js                   | 130 ++++++++++++++
 test/create-webpack-app/init/init.test.js     |  70 +++++++-
 19 files changed, 632 insertions(+), 108 deletions(-)
 create mode 100644 packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
 create mode 100644 packages/create-webpack-app/templates/init/react/postcss.config.js.tpl
 create mode 100644 packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl
 create mode 100644 packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl
 create mode 100644 test/create-webpack-app/init/generators.test.js

diff --git a/.changeset/init-no-html-css-questions.md b/.changeset/init-no-html-css-questions.md
index 59e8757d8e7..b42ab6916d2 100644
--- a/.changeset/init-no-html-css-questions.md
+++ b/.changeset/init-no-html-css-questions.md
@@ -2,4 +2,4 @@
 "create-webpack-app": minor
 ---
 
-feat: stop asking about HTML and CSS in `init`, keeping one question for the CSS preprocessors webpack does not cover
+feat: stop asking about HTML and CSS in `init`, keeping one question for the CSS tools webpack does not cover (PostCSS, Sass, Less, Stylus)
diff --git a/packages/create-webpack-app/README.md b/packages/create-webpack-app/README.md
index bf1b39d065d..96ca1f8f710 100644
--- a/packages/create-webpack-app/README.md
+++ b/packages/create-webpack-app/README.md
@@ -68,7 +68,7 @@ Available templates:
 Every template scaffolds `index.html` as the entry point of the project and relies on
 webpack's built-in HTML and CSS support (webpack >= 5.109), so the generated projects
 carry no `html-webpack-plugin`, `css-loader`, `style-loader` or `mini-css-extract-plugin`.
-A Sass/Less/Stylus project adds only its preprocessor loader.
+Picking Sass, Less, Stylus or PostCSS adds only that tool's loader on top.
 
 Available templates for `loader` and `plugin` generators:
 
diff --git a/packages/create-webpack-app/src/generators/init/default.ts b/packages/create-webpack-app/src/generators/init/default.ts
index fe8ed314b85..0f9870dacce 100644
--- a/packages/create-webpack-app/src/generators/init/default.ts
+++ b/packages/create-webpack-app/src/generators/init/default.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function defaultInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -41,9 +47,18 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssPreprocessor",
-        message: "Which CSS preprocessor do you want to use?",
-        choices: ["none", "SASS", "LESS", "Stylus"],
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
         default: "none",
       },
       {
@@ -80,22 +95,31 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      switch (answers.cssPreprocessor) {
-        case "SASS":
-          answers.styleExtension = "scss";
-          devDependencies.push("sass-loader", "sass");
-          break;
-        case "LESS":
-          answers.styleExtension = "less";
-          devDependencies.push("less-loader", "less");
-          break;
-        case "Stylus":
-          answers.styleExtension = "styl";
-          devDependencies.push("stylus-loader", "stylus");
-          break;
-        default:
-          answers.styleExtension = "css";
-          break;
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
+        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
+      }
+
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
+      }
+
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -129,6 +153,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
+      }
+
       files.push({
         filePath: `./src/styles.${answers.styleExtension}`,
         fileType: "text",
diff --git a/packages/create-webpack-app/src/generators/init/react.ts b/packages/create-webpack-app/src/generators/init/react.ts
index 5b67225fc43..66d70758f87 100644
--- a/packages/create-webpack-app/src/generators/init/react.ts
+++ b/packages/create-webpack-app/src/generators/init/react.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function reactInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -49,9 +55,18 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssPreprocessor",
-        message: "Which CSS preprocessor do you want to use?",
-        choices: ["none", "SASS", "LESS", "Stylus"],
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
         default: "none",
       },
       {
@@ -89,22 +104,31 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      switch (answers.cssPreprocessor) {
-        case "SASS":
-          answers.styleExtension = "scss";
-          devDependencies.push("sass-loader", "sass");
-          break;
-        case "LESS":
-          answers.styleExtension = "less";
-          devDependencies.push("less-loader", "less");
-          break;
-        case "Stylus":
-          answers.styleExtension = "styl";
-          devDependencies.push("stylus-loader", "stylus");
-          break;
-        default:
-          answers.styleExtension = "css";
-          break;
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
+        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
+      }
+
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
+      }
+
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -145,6 +169,10 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
+      }
+
       files.push({
         filePath: `./src/styles/global.${answers.styleExtension}`,
         fileType: "text",
diff --git a/packages/create-webpack-app/src/generators/init/svelte.ts b/packages/create-webpack-app/src/generators/init/svelte.ts
index f195df127d0..fa628e7dc1d 100644
--- a/packages/create-webpack-app/src/generators/init/svelte.ts
+++ b/packages/create-webpack-app/src/generators/init/svelte.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function svelteInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -40,9 +46,18 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssPreprocessor",
-        message: "Which CSS preprocessor do you want to use?",
-        choices: ["none", "SASS", "LESS", "Stylus"],
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
         default: "none",
       },
       {
@@ -77,22 +92,31 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      switch (answers.cssPreprocessor) {
-        case "SASS":
-          answers.styleExtension = "scss";
-          devDependencies.push("sass-loader", "sass");
-          break;
-        case "LESS":
-          answers.styleExtension = "less";
-          devDependencies.push("less-loader", "less");
-          break;
-        case "Stylus":
-          answers.styleExtension = "styl";
-          devDependencies.push("stylus-loader", "stylus");
-          break;
-        default:
-          answers.styleExtension = "css";
-          break;
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
+        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
+      }
+
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
+      }
+
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -129,6 +153,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
         files.push({ filePath: "./src/store/index.js", fileType: "text" });
       }
 
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
+      }
+
       files.push({
         filePath: `./src/styles/global.${answers.styleExtension}`,
         fileType: "text",
diff --git a/packages/create-webpack-app/src/generators/init/vue.ts b/packages/create-webpack-app/src/generators/init/vue.ts
index 889749826db..0a0a4dfe945 100644
--- a/packages/create-webpack-app/src/generators/init/vue.ts
+++ b/packages/create-webpack-app/src/generators/init/vue.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function vueInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -48,9 +54,18 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssPreprocessor",
-        message: "Which CSS preprocessor do you want to use?",
-        choices: ["none", "SASS", "LESS", "Stylus"],
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
         default: "none",
       },
       {
@@ -89,22 +104,31 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      switch (answers.cssPreprocessor) {
-        case "SASS":
-          answers.styleExtension = "scss";
-          devDependencies.push("sass-loader", "sass");
-          break;
-        case "LESS":
-          answers.styleExtension = "less";
-          devDependencies.push("less-loader", "less");
-          break;
-        case "Stylus":
-          answers.styleExtension = "styl";
-          devDependencies.push("stylus-loader", "stylus");
-          break;
-        default:
-          answers.styleExtension = "css";
-          break;
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
+        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
+      }
+
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
+      }
+
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -151,6 +175,10 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
         }
       }
 
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
+      }
+
       files.push({
         filePath: `./src/styles/global.${answers.styleExtension}`,
         fileType: "text",
diff --git a/packages/create-webpack-app/src/index.ts b/packages/create-webpack-app/src/index.ts
index 90ddfd246e0..1c7144ae238 100644
--- a/packages/create-webpack-app/src/index.ts
+++ b/packages/create-webpack-app/src/index.ts
@@ -18,7 +18,7 @@ const baseAnswers: Answers = {
   langType: "none",
   devServer: true,
   workboxWebpackPlugin: true,
-  cssPreprocessor: "none",
+  cssTool: "none",
   packageManager: "npm",
 };
 const initValues: Record<string, Answers> = {
diff --git a/packages/create-webpack-app/templates/init/default/README.md.tpl b/packages/create-webpack-app/templates/init/default/README.md.tpl
index 56d88cd4933..9586b729305 100644
--- a/packages/create-webpack-app/templates/init/default/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/default/README.md.tpl
@@ -21,7 +21,8 @@ stylesheet the page references and emits the page as `dist/index.html`, with the
 references rewritten to the generated assets. Both are supported out of the box, so
 no loader or plugin is needed for `.html` and `.css` files.
 
-A preprocessor keeps that support and only adds its own loader, e.g. for Sass:
+Sass, Less, Stylus and PostCSS keep that support and only add their own loader on
+top of it, as a `css/auto` rule:
 
 ```js
 {
@@ -30,3 +31,6 @@ A preprocessor keeps that support and only adds its own loader, e.g. for Sass:
     use: ["sass-loader"],
 }
 ```
+
+They combine, too: webpack applies `use` right to left, so `["postcss-loader",
+"sass-loader"]` compiles the Sass first and runs PostCSS over the result.
diff --git a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
index 126c3dcc573..84d84b1ea33 100644
--- a/packages/create-webpack-app/templates/init/default/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
@@ -20,6 +20,11 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     },<% if (devServer) { %>
     devServer: {
         open: true,
+    },<% } %><% if (usePostCSS) { %>
+    // The PostCSS rule registers a loader for `.css`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
+    experiments: {
+        css: true,
     },<% } %>
     plugins: [
         // Add your plugins here
@@ -35,21 +40,26 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 test: /\.(ts|tsx)$/i,
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (cssPreprocessor == "SASS") { %>
+            },<% } %><%  if (usePostCSS) { %>
+            {
+                test: /\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: ["sass-loader"],
-            },<% } %><%  if (cssPreprocessor == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: ["less-loader"],
-            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: ["stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/packages/create-webpack-app/templates/init/react/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/react/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/react/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/react/webpack.config.tpl b/packages/create-webpack-app/templates/init/react/webpack.config.tpl
index c7d77fd3957..603844d481f 100644
--- a/packages/create-webpack-app/templates/init/react/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/react/webpack.config.tpl
@@ -20,6 +20,11 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     },<% if (devServer) { %>
     devServer: {
         open: true,
+    },<% } %><% if (usePostCSS) { %>
+    // The PostCSS rule registers a loader for `.css`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
+    experiments: {
+        css: true,
     },<% } %>
     plugins: [
         // Add your plugins here
@@ -41,21 +46,26 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 test: /\.(ts|tsx)$/i,
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (cssPreprocessor == "SASS") { %>
+            },<% } %><%  if (usePostCSS) { %>
+            {
+                test: /\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: ["sass-loader"],
-            },<% } %><%  if (cssPreprocessor == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: ["less-loader"],
-            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: ["stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl b/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
index 30f3799ded4..275fa291e2a 100644
--- a/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
@@ -20,6 +20,11 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     },<% if (devServer) { %>
     devServer: {
         open: true,
+    },<% } %><% if (usePostCSS) { %>
+    // The PostCSS rule registers a loader for `.css`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
+    experiments: {
+        css: true,
     },<% } %>
     plugins: [
         // Add your plugins here
@@ -54,21 +59,26 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 options: {
                     appendTsSuffixTo: [/\.svelte$/],
                 },
-            },<% } %><%  if (cssPreprocessor == "SASS") { %>
+            },<% } %><%  if (usePostCSS) { %>
+            {
+                test: /\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: ["sass-loader"],
-            },<% } %><%  if (cssPreprocessor == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: ["less-loader"],
-            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: ["stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/vue/webpack.config.tpl b/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
index 69940c6f2cd..ddf01f9ffe1 100644
--- a/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
@@ -60,21 +60,26 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                     transpileOnly: true,
                 },
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (cssPreprocessor == "SASS") { %>
+            },<% } %><%  if (usePostCSS) { %>
+            {
+                test: /\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: ["sass-loader"],
-            },<% } %><%  if (cssPreprocessor == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: ["less-loader"],
-            },<% } %><%  if (cssPreprocessor == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: ["stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
index 626253d39d9..54de3dbd1aa 100644
--- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
+++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
@@ -42,6 +42,90 @@ exports[`create-webpack-app cli should ask question when wrong template is suppl
 }
 `;
 
+exports[`create-webpack-app cli should chain PostCSS after a preprocessor when both are selected 1`] = `
+{
+  "description": "My webpack project",
+  "devDependencies": {
+    "autoprefixer": "x.x.x",
+    "postcss": "x.x.x",
+    "postcss-loader": "x.x.x",
+    "sass": "x.x.x",
+    "sass-loader": "x.x.x",
+    "webpack": "x.x.x",
+    "webpack-cli": "x.x.x",
+  },
+  "name": "webpack-project",
+  "scripts": {
+    "build": "webpack --mode=production --config-node-env=production",
+    "build:dev": "webpack --mode=development",
+    "watch": "webpack --watch",
+  },
+  "type": "module",
+  "version": "1.0.0",
+}
+`;
+
+exports[`create-webpack-app cli should chain PostCSS after a preprocessor when both are selected 2`] = `
+"// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const isProduction = process.env.NODE_ENV === "production";
+
+/** @type {import("webpack").Configuration} */
+const config = {
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
+    output: {
+        path: path.resolve(__dirname, "dist"),
+    },
+    // The PostCSS rule registers a loader for \`.css\`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
+    experiments: {
+        css: true,
+    },
+    plugins: [
+        // Add your plugins here
+        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },
+            {
+                test: /\\.s[ac]ss$/i,
+                type: "css/auto",
+                use: ["postcss-loader", "sass-loader"],
+            },
+            {
+                test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                type: "asset",
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+
+export default () => {
+    if (isProduction) {
+        config.mode = "production";
+    } else {
+        config.mode = "development";
+    }
+    return config;
+};
+"
+`;
+
 exports[`create-webpack-app cli should configure WDS as opted 1`] = `
 {
   "description": "My webpack project",
@@ -1342,6 +1426,83 @@ export default () => {
 "
 `;
 
+exports[`create-webpack-app cli should scaffold PostCSS on top of the built-in CSS support when selected 1`] = `
+{
+  "description": "My webpack project",
+  "devDependencies": {
+    "autoprefixer": "x.x.x",
+    "postcss": "x.x.x",
+    "postcss-loader": "x.x.x",
+    "webpack": "x.x.x",
+    "webpack-cli": "x.x.x",
+  },
+  "name": "webpack-project",
+  "scripts": {
+    "build": "webpack --mode=production --config-node-env=production",
+    "build:dev": "webpack --mode=development",
+    "watch": "webpack --watch",
+  },
+  "type": "module",
+  "version": "1.0.0",
+}
+`;
+
+exports[`create-webpack-app cli should scaffold PostCSS on top of the built-in CSS support when selected 2`] = `
+"// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const isProduction = process.env.NODE_ENV === "production";
+
+/** @type {import("webpack").Configuration} */
+const config = {
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
+    output: {
+        path: path.resolve(__dirname, "dist"),
+    },
+    // The PostCSS rule registers a loader for \`.css\`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
+    experiments: {
+        css: true,
+    },
+    plugins: [
+        // Add your plugins here
+        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },
+            {
+                test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                type: "asset",
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+
+export default () => {
+    if (isProduction) {
+        config.mode = "production";
+    } else {
+        config.mode = "development";
+    }
+    return config;
+};
+"
+`;
+
 exports[`create-webpack-app cli should scaffold a preprocessor through the built-in CSS support when selected 1`] = `
 {
   "description": "My webpack project",
diff --git a/test/create-webpack-app/init/generators.test.js b/test/create-webpack-app/init/generators.test.js
new file mode 100644
index 00000000000..1ad951b5d59
--- /dev/null
+++ b/test/create-webpack-app/init/generators.test.js
@@ -0,0 +1,130 @@
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+
+const LIB = path.resolve(__dirname, "../../../packages/create-webpack-app/lib");
+
+const BASE_ANSWERS = {
+  projectPath: "/tmp/create-webpack-app-generators",
+  langType: "ES6",
+  devServer: true,
+  workboxWebpackPlugin: false,
+  useReactState: true,
+  useVueStore: true,
+  packageManager: "npm",
+};
+
+// Each template scaffolds its stylesheet in a different place
+const STYLESHEETS = {
+  default: (extension) => `styles.${extension}`,
+  react: (extension) => `global.${extension}`,
+  vue: (extension) => `global.${extension}`,
+  svelte: (extension) => `global.${extension}`,
+};
+
+const TEMPLATES = Object.keys(STYLESHEETS);
+
+// Every choice of the CSS tool question, and what it has to pull in
+const CSS_TOOLS = [
+  { answer: "none", extension: "css", packages: [] },
+  { answer: "PostCSS", extension: "css", packages: ["postcss-loader", "postcss", "autoprefixer"] },
+  { answer: "SASS", extension: "scss", packages: ["sass-loader", "sass"] },
+  {
+    answer: "SASS with PostCSS",
+    extension: "scss",
+    packages: ["sass-loader", "sass", "postcss-loader"],
+  },
+  { answer: "LESS", extension: "less", packages: ["less-loader", "less"] },
+  {
+    answer: "LESS with PostCSS",
+    extension: "less",
+    packages: ["less-loader", "less", "postcss-loader"],
+  },
+  { answer: "Stylus", extension: "styl", packages: ["stylus-loader", "stylus"] },
+  {
+    answer: "Stylus with PostCSS",
+    extension: "styl",
+    packages: ["stylus-loader", "stylus", "postcss-loader"],
+  },
+];
+
+/**
+ * Registers a generator against the few plop methods it calls, so its answer
+ * handling can be exercised without a plop instance.
+ * @param {string} template template name
+ * @returns {Promise<EXPECTED_ANY>} the generator config
+ */
+const generatorFor = async (template) => {
+  const module = await import(pathToFileURL(path.join(LIB, "generators/init", `${template}.js`)));
+
+  let config;
+
+  await module.default({
+    load: async () => {},
+    setDefaultInclude: () => {},
+    setPlopfilePath: () => {},
+    getPlopfilePath: () => path.join(LIB, "plopfile.js"),
+    setGenerator: (name, generatorConfig) => {
+      config = generatorConfig;
+    },
+  });
+
+  return config;
+};
+
+// The action list is built without running any action, so no project is written
+// and nothing is installed.
+const actionsFor = async (template, answers) => {
+  const generator = await generatorFor(template);
+
+  return generator.actions({ ...BASE_ANSWERS, ...answers });
+};
+
+const filesFrom = (actions) =>
+  actions
+    .filter((action) => action.type === "generate-files")
+    .map((action) => path.basename(action.path));
+
+const packagesFrom = (actions) =>
+  actions.find((action) => action.type === "install-dependencies").packages;
+
+describe("create-webpack-app generators", () => {
+  for (const template of TEMPLATES) {
+    for (const { answer, extension, packages } of CSS_TOOLS) {
+      it(`scaffolds the ${template} template with "${answer}"`, async () => {
+        const actions = await actionsFor(template, { cssTool: answer });
+        const files = filesFrom(actions);
+        const installed = packagesFrom(actions);
+
+        // the starter stylesheet is written in the language that was picked
+        expect(files).toContain(STYLESHEETS[template](extension));
+
+        for (const name of packages) {
+          expect(installed).toContain(name);
+        }
+
+        // PostCSS is the only tool that needs a config file
+        if (answer.includes("PostCSS")) {
+          expect(files).toContain("postcss.config.js");
+        } else {
+          expect(files).not.toContain("postcss.config.js");
+        }
+
+        // whatever is picked, webpack's own CSS and HTML support stays untouched
+        expect(installed).not.toContain("css-loader");
+        expect(installed).not.toContain("style-loader");
+        expect(installed).not.toContain("mini-css-extract-plugin");
+        expect(installed).not.toContain("html-webpack-plugin");
+        expect(files).toContain("index.html");
+      });
+    }
+  }
+
+  it("keeps the TypeScript entry point and its config", async () => {
+    const actions = await actionsFor("default", { langType: "Typescript", cssTool: "none" });
+    const files = filesFrom(actions);
+
+    expect(files).toContain("index.ts");
+    expect(files).toContain("tsconfig.json");
+    expect(packagesFrom(actions)).toContain("ts-loader");
+  });
+});
diff --git a/test/create-webpack-app/init/init.test.js b/test/create-webpack-app/init/init.test.js
index 76ea6927528..f7b9e296065 100644
--- a/test/create-webpack-app/init/init.test.js
+++ b/test/create-webpack-app/init/init.test.js
@@ -385,6 +385,7 @@ describe("create-webpack-app cli", () => {
       "Do you want to simplify the creation of HTML files for your bundle?",
     );
     expect(stdout).not.toContain("Which of the following CSS solution do you want to use?");
+    expect(stdout).not.toContain("Will you be using CSS styles along with");
     expect(stdout).not.toContain("Do you want to use PostCSS in your project?");
     expect(stdout).not.toContain("Do you want to extract CSS into separate files?");
 
@@ -393,7 +394,7 @@ describe("create-webpack-app cli", () => {
 
     expect(config).toContain('entry: { index: "./index.html" }');
     expect(config).not.toContain("html-webpack-plugin");
-    expect(config).not.toContain("css-loader");
+    expect(config).not.toContain('"css-loader"');
     expect(config).not.toContain("mini-css-extract-plugin");
 
     const { devDependencies } = readFromPkgJSON(dir);
@@ -408,10 +409,10 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${ENTER}`, ENTER],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${ENTER}`, ENTER],
     );
 
-    expect(stdout).toContain("Which CSS preprocessor do you want to use?");
+    expect(stdout).toContain("Which CSS tool do you want to use?");
     expect(stdout).toContain("Project has been initialised with webpack!");
 
     // Sass is wired as a `css/auto` rule, so it needs no css-loader
@@ -419,7 +420,7 @@ describe("create-webpack-app cli", () => {
 
     expect(config).toContain('type: "css/auto"');
     expect(config).toContain('use: ["sass-loader"]');
-    expect(config).not.toContain("css-loader");
+    expect(config).not.toContain('"css-loader"');
     expect(existsSync(resolve(dir, "src/styles.scss"))).toBeTruthy();
 
     // Check if the generated package.json file content matches the snapshot
@@ -429,6 +430,67 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
+  it("should scaffold PostCSS on top of the built-in CSS support when selected", async () => {
+    const { stdout } = await runPromptWithAnswers(
+      dir,
+      ["init", "."],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${ENTER}`, ENTER],
+    );
+
+    expect(stdout).toContain("Project has been initialised with webpack!");
+
+    // A loader for `.css` turns the auto detection off, so the config asks for
+    // the built-in CSS support explicitly
+    const config = readFromWebpackConfig(dir);
+
+    expect(config).toContain("experiments: {");
+    expect(config).toContain("css: true");
+    expect(config).toContain('use: ["postcss-loader"]');
+    expect(config).not.toContain('"css-loader"');
+    expect(existsSync(resolve(dir, "postcss.config.js"))).toBeTruthy();
+
+    const { devDependencies } = readFromPkgJSON(dir);
+
+    expect(Object.keys(devDependencies)).toContain("postcss-loader");
+    expect(Object.keys(devDependencies)).toContain("autoprefixer");
+
+    // Check if the generated package.json file content matches the snapshot
+    expect(readFromPkgJSON(dir)).toMatchSnapshot();
+
+    // Check if the generated webpack configuration matches the snapshot
+    expect(readFromWebpackConfig(dir)).toMatchSnapshot();
+  });
+
+  it("should chain PostCSS after a preprocessor when both are selected", async () => {
+    const { stdout } = await runPromptWithAnswers(
+      dir,
+      ["init", "."],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${ENTER}`, ENTER],
+    );
+
+    expect(stdout).toContain("Project has been initialised with webpack!");
+
+    // `use` is applied right to left, so Sass compiles first and PostCSS runs over it
+    const config = readFromWebpackConfig(dir);
+
+    expect(config).toContain('use: ["postcss-loader", "sass-loader"]');
+    expect(config).toContain('use: ["postcss-loader"]');
+    expect(config).toContain("css: true");
+    expect(existsSync(resolve(dir, "src/styles.scss"))).toBeTruthy();
+    expect(existsSync(resolve(dir, "postcss.config.js"))).toBeTruthy();
+
+    const { devDependencies } = readFromPkgJSON(dir);
+
+    expect(Object.keys(devDependencies)).toContain("sass-loader");
+    expect(Object.keys(devDependencies)).toContain("postcss-loader");
+
+    // Check if the generated package.json file content matches the snapshot
+    expect(readFromPkgJSON(dir)).toMatchSnapshot();
+
+    // Check if the generated webpack configuration matches the snapshot
+    expect(readFromWebpackConfig(dir)).toMatchSnapshot();
+  });
+
   it("should configure workbox-webpack-plugin as opted", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,