fix: remove style-loader from the loader chain (#2309)

webpack · Jan 5, 2021 · 19a25cf · 19a25cf
1 parent 9084eab
commit 19a25cf
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 9 deletions.
diff --git a/packages/generators/__tests__/__snapshots__/init-generator.test.ts.snap b/packages/generators/__tests__/__snapshots__/init-generator.test.ts.snap
@@ -111,9 +111,6 @@ Object {
           Object {
             "loader": "MiniCssExtractPlugin.loader",
           },
-          Object {
-            "loader": "\\"style-loader\\"",
-          },
           Object {
             "loader": "\\"css-loader\\"",
             "options": Object {

diff --git a/packages/generators/__tests__/init-generator.test.ts b/packages/generators/__tests__/init-generator.test.ts
@@ -113,10 +113,9 @@ describe('init generator', () => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const config = (Object.entries(output)[0][1] as any).configuration.config.webpackOptions;
         expect(config.module.rules[0].test).toEqual('/.css$/');
-        expect(config.module.rules[0].use.length).toEqual(3);
+        expect(config.module.rules[0].use.length).toEqual(2);
         expect(config.module.rules[0].use[0].loader).toEqual('MiniCssExtractPlugin.loader');
-        expect(config.module.rules[0].use[1].loader).toEqual('"style-loader"');
-        expect(config.module.rules[0].use[2].loader).toEqual('"css-loader"');
+        expect(config.module.rules[0].use[1].loader).toEqual('"css-loader"');
         //match config snapshot
         expect(config).toMatchSnapshot();
     });

diff --git a/packages/generators/src/init-generator.ts b/packages/generators/src/init-generator.ts
@@ -187,6 +187,9 @@ export default class InitGenerator extends CustomGenerator {
                     );
                 }
 
+                // Remove style-loader from the loader chain
+                ExtractUseProps.shift();
+
                 ExtractUseProps.unshift({
                     loader: 'MiniCssExtractPlugin.loader',
                 });

diff --git a/test/init/language/css/init-language-css.test.js b/test/init/language/css/init-language-css.test.js
@@ -48,9 +48,6 @@ describe('init with SCSS', () => {
                     {
                         loader: MiniCssExtractPlugin.loader, // eslint-disable-line
                     },
-                    {
-                        loader: 'style-loader',
-                    },
                     {
                         loader: 'css-loader',