diff --git a/packages/generators/init-template/default/webpack.configjs.tpl b/packages/generators/init-template/default/webpack.configjs.tpl
index e695d21dd5b..e28bd23cb96 100644
--- a/packages/generators/init-template/default/webpack.configjs.tpl
+++ b/packages/generators/init-template/default/webpack.configjs.tpl
@@ -25,39 +25,32 @@ module.exports = {
             {
                 test: /\\.(js|jsx)$/,
                 loader: 'babel-loader',
-            },
-<% } %><% if (langType == "Typescript") { %>
+            },<% } %><% if (langType == "Typescript") { %>
             {
                 test: /\\.(ts|tsx)$/,
                 loader: 'ts-loader',
                 exclude: ['/node_modules/'],
-            },
-<% } %><%  if (cssType == 'CSS') { %>
+            },<% } %><%  if (isCSS && !isPostCSS) { %>
             {
                 test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
-            },        
-<% } %><%  if (cssType == 'SASS') { %>
+                use: ['style-loader','css-loader'],
+            },<% } %><%  if (cssType == 'SASS') { %>
             {
                 test: /\.s[ac]ss$/i,
-                use: ['style-loader', 'css-loader', 'sass-loader'],
-            },
-<% } %><%  if (cssType == 'LESS') { %>
+                use: ['style-loader', 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'],
+            },<% } %><%  if (cssType == 'LESS') { %>
             {
                 test: /\.less$/i,
-                loader: 'less-loader',
-            },
-<% } %><%  if (cssType == 'Stylus') { %>
+                use: [<% if (isPostCSS) { %>'style-loader', 'css-loader', 'postcss-loader', <% } %>'less-loader'],
+            },<% } %><%  if (cssType == 'Stylus') { %>
             {
                 test: /\.styl$/,
-                loader: 'stylus-loader',
-            },
-<% } %><%  if (cssType == 'PostCSS') { %>
+                use: [<% if (isPostCSS) { %>'style-loader', 'css-loader', 'postcss-loader', <% } %>'stylus-loader'],
+            },<% } %><%  if (isPostCSS && isCSS) { %>
             {
                 test: /\.css$/i,
                 use: ['style-loader', 'css-loader', 'postcss-loader'],
-            },
-<% } %>
+            },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
diff --git a/packages/generators/src/handlers/default.ts b/packages/generators/src/handlers/default.ts
index cdb4d8f2e28..588f4b2db1e 100644
--- a/packages/generators/src/handlers/default.ts
+++ b/packages/generators/src/handlers/default.ts
@@ -51,20 +51,38 @@ export async function questions(self: CustomGenerator, Question: Record<string,
         self.dependencies = [...self.dependencies, 'html-webpack-plugin'];
     }
 
+    // Store all answers for generation
+    self.answers = { ...self.answers, langType, devServer, htmlWebpackPlugin };
+
     // Handle CSS solutions
     const { cssType } = await Question.List(
         self,
         'cssType',
         'Which of the following CSS solutions do you want to use?',
-        ['none', 'CSS', 'SASS', 'LESS', 'Stylus', 'PostCSS'],
+        ['none', 'CSS only', 'SASS', 'LESS', 'Stylus'],
         'none',
         self.force,
     );
 
+    if (cssType == 'none') {
+        self.answers = { ...self.answers, cssType, isCSS: false, isPostCSS: false };
+        return;
+    }
+
+    const { isCSS } =
+        cssType != 'CSS only'
+            ? await Question.Confirm(self, 'isCSS', `Will you be using CSS styles along with ${cssType} in your project?`, true, self.force)
+            : { isCSS: true };
+
+    const { isPostCSS } = await Question.Confirm(
+        self,
+        'isPostCSS',
+        'Will you be using PostCSS in your project?',
+        cssType == 'CSS only',
+        self.force,
+    );
+
     switch (cssType) {
-        case 'CSS':
-            self.dependencies = [...self.dependencies, 'style-loader', 'css-loader'];
-            break;
         case 'SASS':
             self.dependencies = [...self.dependencies, 'sass-loader', 'sass'];
             break;
@@ -74,12 +92,17 @@ export async function questions(self: CustomGenerator, Question: Record<string,
         case 'Stylus':
             self.dependencies = [...self.dependencies, 'stylus-loader', 'stylus'];
             break;
-        case 'PostCSS':
-            self.dependencies = [...self.dependencies, 'postcss-loader', 'postcss', 'autoprefixer'];
     }
 
-    // store all answers for generation
-    self.answers = { ...self.answers, langType, devServer, htmlWebpackPlugin, cssType };
+    if (isCSS) {
+        self.dependencies = [...self.dependencies, 'style-loader', 'css-loader'];
+    }
+
+    if (isPostCSS) {
+        self.dependencies = [...self.dependencies, 'postcss-loader', 'postcss', 'autoprefixer'];
+    }
+
+    self.answers = { ...self.answers, cssType, isCSS, isPostCSS };
 }
 
 /**
@@ -121,10 +144,8 @@ export function generate(self: CustomGenerator): void {
             break;
     }
 
-    // Generate CSS language essentials
-    switch (self.answers.cssType) {
-        case 'PostCSS':
-            self.fs.copyTpl(resolveFile('postcss.config.js'), self.destinationPath('postcss.config.js'));
-            break;
+    // Generate postcss configuration
+    if (self.answers.isPostCSS) {
+        self.fs.copyTpl(resolveFile('postcss.config.js'), self.destinationPath('postcss.config.js'));
     }
 }
diff --git a/test/init/__snapshots__/init.test.js.snap.webpack4 b/test/init/__snapshots__/init.test.js.snap.webpack4
index 767f337a9a5..0fbcc7906eb 100644
--- a/test/init/__snapshots__/init.test.js.snap.webpack4
+++ b/test/init/__snapshots__/init.test.js.snap.webpack4
@@ -227,7 +227,6 @@ module.exports = {
                 test: /\\\\\\\\.(js|jsx)$/,
                 loader: 'babel-loader',
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -345,7 +344,6 @@ module.exports = {
                 loader: 'ts-loader',
                 exclude: ['/node_modules/'],
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -400,9 +398,8 @@ module.exports = {
         rules: [
             {
                 test: /\\\\.less$/i,
-                loader: 'less-loader',
+                use: ['less-loader'],
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -436,7 +433,65 @@ module.exports = {
                 test: /\\\\.css$/i,
                 use: ['style-loader', 'css-loader', 'postcss-loader'],
             },
+            {
+                test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+"
+`;
+
+exports[`init command should use sass and css with postcss in project when selected 1`] = `
+Object {
+  "description": "My webpack project",
+  "devDependencies": Object {
+    "autoprefixer": "x.x.x",
+    "css-loader": "x.x.x",
+    "postcss": "x.x.x",
+    "postcss-loader": "x.x.x",
+    "sass": "x.x.x",
+    "sass-loader": "x.x.x",
+    "style-loader": "x.x.x",
+    "webpack": "x.x.x",
+    "webpack-cli": "x.x.x",
+  },
+  "name": "my-webpack-project",
+  "scripts": Object {
+    "build": "webpack --mode=production",
+  },
+  "version": "1.0.0",
+}
+`;
 
+exports[`init command should use sass and css with postcss in project when selected 2`] = `
+"// Generated using webpack-cli http://github.com/webpack-cli
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        // Add your plugins here
+        // Learn more obout plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\\\\.s[ac]ss$/i,
+                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+            },
+            {
+                test: /\\\\.css$/i,
+                use: ['style-loader', 'css-loader', 'postcss-loader'],
+            },
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -490,7 +545,59 @@ module.exports = {
                 test: /\\\\.s[ac]ss$/i,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
             },
+            {
+                test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+"
+`;
+
+exports[`init command should use sass with postcss in project when selected 1`] = `
+Object {
+  "description": "My webpack project",
+  "devDependencies": Object {
+    "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": "my-webpack-project",
+  "scripts": Object {
+    "build": "webpack --mode=production",
+  },
+  "version": "1.0.0",
+}
+`;
 
+exports[`init command should use sass with postcss in project when selected 2`] = `
+"// Generated using webpack-cli http://github.com/webpack-cli
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        // Add your plugins here
+        // Learn more obout plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\\\\.s[ac]ss$/i,
+                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+            },
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -542,9 +649,8 @@ module.exports = {
         rules: [
             {
                 test: /\\\\.styl$/,
-                loader: 'stylus-loader',
+                use: ['stylus-loader'],
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
diff --git a/test/init/__snapshots__/init.test.js.snap.webpack5 b/test/init/__snapshots__/init.test.js.snap.webpack5
index 767f337a9a5..0fbcc7906eb 100644
--- a/test/init/__snapshots__/init.test.js.snap.webpack5
+++ b/test/init/__snapshots__/init.test.js.snap.webpack5
@@ -227,7 +227,6 @@ module.exports = {
                 test: /\\\\\\\\.(js|jsx)$/,
                 loader: 'babel-loader',
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -345,7 +344,6 @@ module.exports = {
                 loader: 'ts-loader',
                 exclude: ['/node_modules/'],
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -400,9 +398,8 @@ module.exports = {
         rules: [
             {
                 test: /\\\\.less$/i,
-                loader: 'less-loader',
+                use: ['less-loader'],
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -436,7 +433,65 @@ module.exports = {
                 test: /\\\\.css$/i,
                 use: ['style-loader', 'css-loader', 'postcss-loader'],
             },
+            {
+                test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+"
+`;
+
+exports[`init command should use sass and css with postcss in project when selected 1`] = `
+Object {
+  "description": "My webpack project",
+  "devDependencies": Object {
+    "autoprefixer": "x.x.x",
+    "css-loader": "x.x.x",
+    "postcss": "x.x.x",
+    "postcss-loader": "x.x.x",
+    "sass": "x.x.x",
+    "sass-loader": "x.x.x",
+    "style-loader": "x.x.x",
+    "webpack": "x.x.x",
+    "webpack-cli": "x.x.x",
+  },
+  "name": "my-webpack-project",
+  "scripts": Object {
+    "build": "webpack --mode=production",
+  },
+  "version": "1.0.0",
+}
+`;
 
+exports[`init command should use sass and css with postcss in project when selected 2`] = `
+"// Generated using webpack-cli http://github.com/webpack-cli
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        // Add your plugins here
+        // Learn more obout plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\\\\.s[ac]ss$/i,
+                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+            },
+            {
+                test: /\\\\.css$/i,
+                use: ['style-loader', 'css-loader', 'postcss-loader'],
+            },
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -490,7 +545,59 @@ module.exports = {
                 test: /\\\\.s[ac]ss$/i,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
             },
+            {
+                test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+"
+`;
+
+exports[`init command should use sass with postcss in project when selected 1`] = `
+Object {
+  "description": "My webpack project",
+  "devDependencies": Object {
+    "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": "my-webpack-project",
+  "scripts": Object {
+    "build": "webpack --mode=production",
+  },
+  "version": "1.0.0",
+}
+`;
 
+exports[`init command should use sass with postcss in project when selected 2`] = `
+"// Generated using webpack-cli http://github.com/webpack-cli
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        // Add your plugins here
+        // Learn more obout plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\\\\.s[ac]ss$/i,
+                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+            },
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
@@ -542,9 +649,8 @@ module.exports = {
         rules: [
             {
                 test: /\\\\.styl$/,
-                loader: 'stylus-loader',
+                use: ['stylus-loader'],
             },
-
             {
                 test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                 type: 'asset',
diff --git a/test/init/init.test.js b/test/init/init.test.js
index 91809ab079d..38b026b75d4 100644
--- a/test/init/init.test.js
+++ b/test/init/init.test.js
@@ -172,7 +172,7 @@ describe('init command', () => {
         const { stdout, stderr } = await runPromptWithAnswers(
             assetsPath,
             ['init'],
-            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${ENTER}`],
+            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`],
         );
         expect(stdout).toContain('Project has been initialised with webpack!');
         expect(stderr).toContain('webpack.config.js');
@@ -190,11 +190,55 @@ describe('init command', () => {
         expect(readFromWebpackConfig(assetsPath)).toMatchSnapshot();
     });
 
+    it('should use sass with postcss in project when selected', async () => {
+        const { stdout, stderr } = await runPromptWithAnswers(
+            assetsPath,
+            ['init'],
+            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `y${ENTER}`],
+        );
+        expect(stdout).toContain('Project has been initialised with webpack!');
+        expect(stderr).toContain('webpack.config.js');
+
+        // Test files
+        const files = ['package.json', 'src', 'src/index.js', 'webpack.config.js', 'postcss.config.js'];
+        files.forEach((file) => {
+            expect(existsSync(resolve(assetsPath, file))).toBeTruthy();
+        });
+
+        // Check if the generated package.json file content matches the snapshot
+        expect(readFromPkgJSON(assetsPath)).toMatchSnapshot();
+
+        // Check if the generated webpack configuration matches the snapshot
+        expect(readFromWebpackConfig(assetsPath)).toMatchSnapshot();
+    });
+
+    it('should use sass and css with postcss in project when selected', async () => {
+        const { stdout, stderr } = await runPromptWithAnswers(
+            assetsPath,
+            ['init'],
+            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`],
+        );
+        expect(stdout).toContain('Project has been initialised with webpack!');
+        expect(stderr).toContain('webpack.config.js');
+
+        // Test files
+        const files = ['package.json', 'src', 'src/index.js', 'webpack.config.js', 'postcss.config.js'];
+        files.forEach((file) => {
+            expect(existsSync(resolve(assetsPath, file))).toBeTruthy();
+        });
+
+        // Check if the generated package.json file content matches the snapshot
+        expect(readFromPkgJSON(assetsPath)).toMatchSnapshot();
+
+        // Check if the generated webpack configuration matches the snapshot
+        expect(readFromWebpackConfig(assetsPath)).toMatchSnapshot();
+    });
+
     it('should use less in project when selected', async () => {
         const { stdout, stderr } = await runPromptWithAnswers(
             assetsPath,
             ['init'],
-            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${ENTER}`],
+            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`],
         );
         expect(stdout).toContain('Project has been initialised with webpack!');
         expect(stderr).toContain('webpack.config.js');
@@ -216,7 +260,7 @@ describe('init command', () => {
         const { stdout, stderr } = await runPromptWithAnswers(
             assetsPath,
             ['init'],
-            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${DOWN}${ENTER}`],
+            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`],
         );
         expect(stdout).toContain('Project has been initialised with webpack!');
         expect(stderr).toContain('webpack.config.js');
@@ -257,7 +301,7 @@ describe('init command', () => {
         const { stdout, stderr } = await runPromptWithAnswers(
             assetsPath,
             ['init'],
-            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${DOWN}${DOWN}${ENTER}`],
+            [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${DOWN}${ENTER}`, ENTER],
         );
         expect(stdout).toContain('Project has been initialised with webpack!');
         expect(stderr).toContain('webpack.config.js');