From 57cbc03abafb31ca9103d023af19a4d2280dacdf Mon Sep 17 00:00:00 2001
From: Ken Ho <kentsu.ho@gmail.com>
Date: Sat, 19 Mar 2022 22:05:56 +0800
Subject: [PATCH] fix(mini-runner): vue <style module> should work when
 cssModules is enabled

---
 .../src/webpack/build.conf.ts                 |  3 ++-
 .../taro-mini-runner/src/webpack/chain.ts     | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/taro-mini-runner/src/webpack/build.conf.ts b/packages/taro-mini-runner/src/webpack/build.conf.ts
index 6aa913fe9c7d..d601a5c6ce4c 100644
--- a/packages/taro-mini-runner/src/webpack/build.conf.ts
+++ b/packages/taro-mini-runner/src/webpack/build.conf.ts
@@ -238,7 +238,8 @@ export default (appPath: string, mode, config: Partial<IBuildConfig>): any => {
       mediaUrlLoaderOption,
 
       postcss,
-      fileType
+      fileType,
+      framework
     }),
     plugin,
     optimization: {
diff --git a/packages/taro-mini-runner/src/webpack/chain.ts b/packages/taro-mini-runner/src/webpack/chain.ts
index 357874bfa1c4..a5a01837b974 100644
--- a/packages/taro-mini-runner/src/webpack/chain.ts
+++ b/packages/taro-mini-runner/src/webpack/chain.ts
@@ -24,6 +24,7 @@ import {
   REG_SCRIPTS,
   REG_CSS,
   REG_TEMPLATE,
+  FRAMEWORK_MAP,
   chalk
 } from '@tarojs/helper'
 import { getSassLoaderOption } from '@tarojs/runner-utils'
@@ -213,7 +214,8 @@ export const getModule = (appPath: string, {
   imageUrlLoaderOption,
   mediaUrlLoaderOption,
   postcss,
-  fileType
+  fileType,
+  framework
 }) => {
   const postcssOption: IPostcssOption = postcss || {}
 
@@ -315,8 +317,9 @@ export const getModule = (appPath: string, {
   const stylusLoader = getStylusLoader([{ sourceMap: enableSourceMap }, stylusLoaderOption])
 
   const cssLoaders: {
-    include?;
-    use;
+    include?
+    resourceQuery?
+    use
   }[] = [{
     use: [
       extractCssLoader,
@@ -348,6 +351,17 @@ export const getModule = (appPath: string, {
         postcssLoader
       ]
     })
+
+    if (framework === FRAMEWORK_MAP.VUE3 || framework === FRAMEWORK_MAP.VUE) {
+      cssLoaders.unshift({
+        resourceQuery: /module/,
+        use: [
+          extractCssLoader,
+          cssLoaderWithModule,
+          postcssLoader
+        ]
+      })
+    }
   }
 
   const urlOptions: PostcssOption.url = recursiveMerge({}, defaultUrlOption, postcssOption.url)