fix: add style and css loader to sass/less/stylus replaces #3172 (#3412)

webpack · Sep 19, 2022 · 8581a4b · 8581a4b
1 parent bfe09c7
commit 8581a4b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/generators/init-template/default/webpack.configjs.tpl b/packages/generators/init-template/default/webpack.configjs.tpl
@@ -6,7 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (wo
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %>
 
 const isProduction = process.env.NODE_ENV == 'production';
-<% if (isCSS) { %>
+<% if (cssType !== 'none') { %>
 <% if (extractPlugin === "Yes") { %>
 const stylesHandler = MiniCssExtractPlugin.loader;
 <% } else if (extractPlugin === "Only for Production") { %>
@@ -56,11 +56,11 @@ const config = {
             },<% } %><%  if (cssType == 'LESS') { %>
             {
                 test: /\.less$/i,
-                use: [<% if (isPostCSS) { %>stylesHandler, 'css-loader', 'postcss-loader', <% } %>'less-loader'],
+                use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'],
             },<% } %><%  if (cssType == 'Stylus') { %>
             {
                 test: /\.styl$/i,
-                use: [<% if (isPostCSS) { %>stylesHandler, 'css-loader', 'postcss-loader', <% } %>'stylus-loader'],
+                use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'],
             },<% } %><%  if (isPostCSS && isCSS) { %>
             {
                 test: /\.css$/i,

diff --git a/packages/generators/src/handlers/default.ts b/packages/generators/src/handlers/default.ts
@@ -150,7 +150,7 @@ export async function questions(
       break;
   }
 
-  if (isCSS) {
+  if (cssType !== "none") {
     self.dependencies.push("style-loader", "css-loader");
   }
 

diff --git a/test/init/__snapshots__/init.test.js.snap.webpack5 b/test/init/__snapshots__/init.test.js.snap.webpack5
@@ -708,8 +708,10 @@ exports[`init command should use less in project when selected 1`] = `
 Object {
   "description": "My webpack project",
   "devDependencies": Object {
+    "css-loader": "x.x.x",
     "less": "x.x.x",
     "less-loader": "x.x.x",
+    "style-loader": "x.x.x",
     "webpack": "x.x.x",
     "webpack-cli": "x.x.x",
   },
@@ -731,6 +733,8 @@ const path = require(\\"path\\");
 
 const isProduction = process.env.NODE_ENV == \\"production\\";
 
+const stylesHandler = \\"style-loader\\";
+
 const config = {
   entry: \\"./src/index.js\\",
   output: {
@@ -744,7 +748,7 @@ const config = {
     rules: [
       {
         test: /\\\\.less$/i,
-        use: [\\"less-loader\\"],
+        use: [stylesHandler, \\"css-loader\\", \\"less-loader\\"],
       },
       {
         test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
@@ -772,8 +776,10 @@ exports[`init command should use mini-css-extract-plugin when selected 1`] = `
 Object {
   "description": "My webpack project",
   "devDependencies": Object {
+    "css-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",
   },
@@ -795,6 +801,8 @@ const path = require(\\"path\\");
 
 const isProduction = process.env.NODE_ENV == \\"production\\";
 
+const stylesHandler = \\"style-loader\\";
+
 const config = {
   entry: \\"./src/index.js\\",
   output: {
@@ -980,8 +988,10 @@ exports[`init command should use sass in project when selected 1`] = `
 Object {
   "description": "My webpack project",
   "devDependencies": Object {
+    "css-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",
   },
@@ -1003,6 +1013,8 @@ const path = require(\\"path\\");
 
 const isProduction = process.env.NODE_ENV == \\"production\\";
 
+const stylesHandler = \\"style-loader\\";
+
 const config = {
   entry: \\"./src/index.js\\",
   output: {
@@ -1045,10 +1057,12 @@ 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",
   },
@@ -1070,6 +1084,8 @@ const path = require(\\"path\\");
 
 const isProduction = process.env.NODE_ENV == \\"production\\";
 
+const stylesHandler = \\"style-loader\\";
+
 const config = {
   entry: \\"./src/index.js\\",
   output: {
@@ -1111,6 +1127,8 @@ exports[`init command should use stylus in project when selected 1`] = `
 Object {
   "description": "My webpack project",
   "devDependencies": Object {
+    "css-loader": "x.x.x",
+    "style-loader": "x.x.x",
     "stylus": "x.x.x",
     "stylus-loader": "x.x.x",
     "webpack": "x.x.x",
@@ -1134,6 +1152,8 @@ const path = require(\\"path\\");
 
 const isProduction = process.env.NODE_ENV == \\"production\\";
 
+const stylesHandler = \\"style-loader\\";
+
 const config = {
   entry: \\"./src/index.js\\",
   output: {
@@ -1147,7 +1167,7 @@ const config = {
     rules: [
       {
         test: /\\\\.styl$/i,
-        use: [\\"stylus-loader\\"],
+        use: [stylesHandler, \\"css-loader\\", \\"stylus-loader\\"],
       },
       {
         test: /\\\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,