feat(examples): add <style> tag

unplugin · Sep 5, 2024 · 75ebc3b · 75ebc3b
1 parent d6e42cd
commit 75ebc3b
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 15 deletions.
diff --git a/examples/rspack/package.json b/examples/rspack/package.json
@@ -12,8 +12,9 @@
   "devDependencies": {
     "@rspack/cli": "1.0.3",
     "@rspack/core": "1.0.3",
+    "css-loader": "^7.1.2",
     "serve": "^14.2.3",
-    "swc-loader": "^0.2.6",
+    "style-loader": "^4.0.0",
     "ts-node": "^10.9.2",
     "unplugin-vue": "workspace:*"
   }

diff --git a/examples/rspack/rspack.config.js b/examples/rspack/rspack.config.js
@@ -13,8 +13,21 @@ const config = {
       {
         enforce: 'post',
         test: /\.m?ts$/,
-        exclude: /(node_modules)/,
-        use: { loader: 'swc-loader' },
+        exclude: /node_modules/,
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.css$/,
+        enforce: 'post',
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },

diff --git a/examples/rspack/src/App.vue b/examples/rspack/src/App.vue
@@ -5,8 +5,14 @@ const msg = ref('')
 
 <template>
   <div>
-    <h1>Hello world</h1>
+    <h1 class="text-red">Hello world</h1>
     <h2>{{ msg }}</h2>
     <input v-model="msg" type="text" />
   </div>
 </template>
+
+<style scoped>
+.text-red {
+  color: red;
+}
+</style>
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -12,8 +12,10 @@
   "devDependencies": {
     "@swc/core": "^1.7.23",
     "@types/webpack": "^5.28.5",
+    "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.0",
     "serve": "^14.2.3",
+    "style-loader": "^4.0.0",
     "sucrase": "^3.35.0",
     "swc-loader": "^0.2.6",
     "unplugin-vue": "workspace:*",

diff --git a/examples/webpack/src/App.vue b/examples/webpack/src/App.vue
@@ -5,8 +5,14 @@ const msg = ref('')
 
 <template>
   <div>
-    <h1>Hello world</h1>
+    <h1 class="text-red">Hello world</h1>
     <h2>{{ msg }}</h2>
     <input v-model="msg" type="text" />
   </div>
 </template>
+
+<style scoped>
+.text-red {
+  color: red;
+}
+</style>
diff --git a/examples/webpack/webpack.config.ts b/examples/webpack/webpack.config.ts
@@ -13,9 +13,14 @@ const config: Configuration = {
       {
         enforce: 'post',
         test: /\.m?ts$/,
-        exclude: /(node_modules)/,
+        exclude: /node_modules/,
         use: { loader: 'swc-loader' },
       },
+      {
+        test: /\.css$/,
+        enforce: 'post',
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   plugins: [

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml