fix(bundler-webpack): always extract css file in build mode

Author: meteorlxy

packages/@vuepress/bundler-webpack/src/build/createClientConfig.ts

@@ -45,41 +45,41 @@ export const createClientConfig = (
   }
 
   // optimizations for production mode
-  if (app.env.isProd) {
-    // extract-css
-    config.plugin('extract-css').use(require('mini-css-extract-plugin'), [
-      {
-        filename: 'assets/css/styles.[chunkhash:8].css',
-      },
-    ])
+  // extract-css
+  config.plugin('extract-css').use(require('mini-css-extract-plugin'), [
+    {
+      filename: app.env.isProd
+        ? 'assets/css/styles.[chunkhash:8].css'
+        : 'assets/css/styles.css',
+    },
+  ])
 
-    config.optimization.splitChunks({
-      cacheGroups: {
-        // ensure all css are extracted together.
-        // since most of the CSS will be from the theme and very little
-        // CSS will be from async chunks
-        styles: {
-          idHint: 'styles',
-          // necessary to ensure async chunks are also extracted
-          test: (m) => /css\/mini-extract/.test(m.type),
-          chunks: 'all',
-          enforce: true,
-          reuseExistingChunk: true,
-        },
-        // extract external library to a standalone chunk
-        vendor: {
-          idHint: 'vendor',
-          test: /node_modules/,
-          chunks: 'all',
-          priority: -10,
-          reuseExistingChunk: true,
-        },
+  config.optimization.splitChunks({
+    cacheGroups: {
+      // ensure all css are extracted together.
+      // since most of the CSS will be from the theme and very little
+      // CSS will be from async chunks
+      styles: {
+        idHint: 'styles',
+        // necessary to ensure async chunks are also extracted
+        test: (m) => /css\/mini-extract/.test(m.type),
+        chunks: 'all',
+        enforce: true,
+        reuseExistingChunk: true,
       },
-    })
+      // extract external library to a standalone chunk
+      vendor: {
+        idHint: 'vendor',
+        test: /node_modules/,
+        chunks: 'all',
+        priority: -10,
+        reuseExistingChunk: true,
+      },
+    },
+  })
 
-    // enable runtimeChunk
-    config.optimization.runtimeChunk(true)
-  }
+  // enable runtimeChunk
+  config.optimization.runtimeChunk(true)
 
   // disable performance hints
   if (!app.env.isDebug) {

packages/@vuepress/bundler-webpack/src/config/handleModuleStyles.ts

@@ -1,6 +1,5 @@
 import type * as Config from 'webpack-chain'
 import type { App } from '@vuepress/core'
-import * as MiniCSSExtractPlugin from 'mini-css-extract-plugin'
 import type {
   WebpackBundlerOptions,
   LoaderOptions,
@@ -59,7 +58,9 @@ export const handleModuleStyles = ({
   }): void => {
     if (!isServer) {
       if (isBuild) {
-        rule.use('extract-css-loader').loader(MiniCSSExtractPlugin.loader)
+        rule
+          .use('extract-css-loader')
+          .loader(require('mini-css-extract-plugin').loader)
       } else {
         rule.use('style-loader').loader('style-loader')
       }