fix(webpack): enable extractCSS by default (#4388)

packages/schema/src/config/webpack.ts

@@ -86,9 +86,9 @@ export default {
      *   }
      * }
      * ```
-     * @type {false | typeof import('mini-css-extract-plugin').PluginOptions}
+     * @type {boolean | typeof import('mini-css-extract-plugin').PluginOptions}
      */
-    extractCSS: false,
+    extractCSS: true,
 
     /**
      * Enables CSS source map support (defaults to true in development)

packages/webpack/build.config.ts

@@ -16,7 +16,6 @@ export default defineBuildConfig({
     'file-loader',
     'style-resources-loader',
     'url-loader',
-    'vue-style-loader',
     'vue'
   ],
   externals: [

packages/webpack/package.json

@@ -46,7 +46,6 @@
     "unplugin": "^0.7.0",
     "url-loader": "^4.1.1",
     "vue-loader": "^17.0.0",
-    "vue-style-loader": "^4.1.3",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-middleware": "^5.3.3",

packages/webpack/src/presets/style.ts

@@ -29,7 +29,7 @@ function extractCSS (ctx: WebpackConfigContext) {
     config.plugins.push(new MiniCssExtractPlugin({
       filename: fileName(ctx, 'css'),
       chunkFilename: fileName(ctx, 'css'),
-      ...options.webpack.extractCSS
+      ...options.webpack.extractCSS === true ? {} : options.webpack.extractCSS
     }))
   }
 }
@@ -113,10 +113,11 @@ function createCssLoadersRule (ctx: WebpackConfigContext, cssLoaderOptions) {
   }
 
   return [
-    {
-      loader: 'vue-style-loader',
-      options: options.webpack.loaders.vueStyle
-    },
+    // https://github.com/vuejs/vue-style-loader/issues/56
+    // {
+    //   loader: 'vue-style-loader',
+    //   options: options.webpack.loaders.vueStyle
+    // },
     cssLoader
   ]
 }

yarn.lock

@@ -1830,7 +1830,6 @@ __metadata:
     url-loader: ^4.1.1
     vue: 3.2.37
     vue-loader: ^17.0.0
-    vue-style-loader: ^4.1.3
     webpack: ^5.73.0
     webpack-bundle-analyzer: ^4.5.0
     webpack-dev-middleware: ^5.3.3
@@ -7386,13 +7385,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hash-sum@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "hash-sum@npm:1.0.2"
-  checksum: 268553ba6c84333f502481d101a7d65cd39f61963544f12fc3ce60264718f471796dbc37348cee08c5529f04fafeba041886a4d35721e34d6440a48a42629283
-  languageName: node
-  linkType: hard
-
 "hash-sum@npm:^2.0.0":
   version: 2.0.0
   resolution: "hash-sum@npm:2.0.0"
@@ -8489,17 +8481,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^1.0.2":
-  version: 1.4.0
-  resolution: "loader-utils@npm:1.4.0"
-  dependencies:
-    big.js: ^5.2.2
-    emojis-list: ^3.0.0
-    json5: ^1.0.1
-  checksum: d150b15e7a42ac47d935c8b484b79e44ff6ab4c75df7cc4cb9093350cf014ec0b17bdb60c5d6f91a37b8b218bd63b973e263c65944f58ca2573e402b9a27e717
-  languageName: node
-  linkType: hard
-
 "loader-utils@npm:^2.0.0":
   version: 2.0.2
   resolution: "loader-utils@npm:2.0.2"
@@ -13541,16 +13522,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-style-loader@npm:^4.1.3":
-  version: 4.1.3
-  resolution: "vue-style-loader@npm:4.1.3"
-  dependencies:
-    hash-sum: ^1.0.2
-    loader-utils: ^1.0.2
-  checksum: ef79d0c6329303d69c87f128f67e486bd37e9a8d416aa662edafae62fab727117b7452f50be8b11fe0c4cb43992344d5ef6a46b206f375fca4d37ae5a5b99185
-  languageName: node
-  linkType: hard
-
 "vue-tsc@npm:^0.37.5":
   version: 0.37.5
   resolution: "vue-tsc@npm:0.37.5"