chore: update paly webpack

Author: baiwusanyu-c

.idea/unplugin-vue-cssvars.iml

@@ -1,22 +1,17 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import Comp from '../../comp.vue'
+const color = ref('blue')
+const appAsd = () => 'red'
+const fooColor = appAsd()
+</script>
+
 <template>
-  <p>ttttt</p>
+  <div id="foo" class="scss">
+    app
+  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'App',
-})
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style scoped>
+@import '@/assets/css/foo.css';
 </style>

play/webpack/src/App.vue

@@ -0,0 +1,6 @@
+#foo{
+  color: v-bind-m(color);
+  background: #ffebf8;
+  width: 200px;
+  height: 30px;
+}

play/webpack/src/assets/css/foo.css

@@ -0,0 +1,15 @@
+@import "test2.css";
+
+/** test.css **/
+p {
+    color: v-bind(color);
+}
+/*.test {
+    color: red;
+}
+.test .test_t {
+    color: v-bind(font);
+}
+.test>.test_t {
+    color: v-bind(font);
+}*/

play/webpack/src/assets/css/test.css

@@ -0,0 +1,10 @@
+@import "test.css";
+/*
+存在相同样式（test.css），会以先出现的那个优先
+*/
+/*div {
+    color: v-bind(appTheme2);
+}*/
+.test {
+    color: v-bind(appTheme2);
+}

play/webpack/src/assets/css/test2.css

@@ -1,4 +1,17 @@
+const { resolve } = require('path')
 const { defineConfig } = require('@vue/cli-service')
+const { webpackVueCSSVars } = require('../../dist/index.cjs')
 module.exports = defineConfig({
   transpileDependencies: true,
+  configureWebpack: {
+    plugins: [
+      webpackVueCSSVars({
+        include: [/.vue/],
+        includeCompile: ['**/**.scss', '**/**.css'],
+        alias: {
+          '@': resolve(__dirname, './src'),
+        },
+      }),
+    ],
+  },
 })