diff --git a/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/remove-scoped.js b/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/remove-scoped.js
index 3fa5556214c8aef2088e14d3224a9d68f4f19c66..e22ffbcfcf5fce23de45b85ec81008b5d36c3fac 100644
--- a/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/remove-scoped.js
+++ b/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/remove-scoped.js
@@ -1,5 +1,5 @@
 "use strict";
-var __importStar = (this && this.__importStar) || function(mod) {
+var __importStar = (this && this.__importStar) || function (mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
   if (mod != null)
@@ -14,8 +14,8 @@ Object.defineProperty(exports, "__esModule", {
 const postcss = __importStar(require("postcss"));
 // postcss-selector-parser does have typings but it's problematic to work with.
 const selectorParser = require('postcss-selector-parser');
-exports.default = postcss.plugin('remove-scoped', (options) => (root) => {
-  root.each(function rewriteSelector(node) {
+const once = (root) => {
+  root.each(function rewriteSelector (node) {
     if (!node.selector) {
       // handle media queries
       if (node.type === 'atrule') {
@@ -58,4 +58,22 @@ exports.default = postcss.plugin('remove-scoped', (options) => (root) => {
       });
     }).processSync(node.selector);
   });
-});
+};
+
+const version = Number(require('postcss/package.json').version.split('.')[0])
+
+if (version < 8) {
+  const postcss = require('postcss')
+  module.exports = postcss.plugin('remove-scoped', function (opts) {
+    return once
+  })
+} else {
+  module.exports = function (opts) {
+    return {
+      postcssPlugin: 'remove-scoped',
+      Once: once
+    }
+  }
+
+  module.exports.postcss = true
+}
diff --git a/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/scoped.js b/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/scoped.js
index 0d2fc1ac84b9d68491785ca97e9f164e700bee2f..da0f637487bc721bb447b72aab3b7914cae54771 100644
--- a/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/scoped.js
+++ b/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/scoped.js
@@ -1,112 +1,130 @@
 "use strict";
 var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+  result["default"] = mod;
+  return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const postcss = __importStar(require("postcss"));
 // postcss-selector-parser does have typings but it's problematic to work with.
 const selectorParser = require('postcss-selector-parser');
-exports.default = postcss.plugin('add-id', (options) => (root) => {
-    const id = options;
-    const keyframes = Object.create(null);
-    root.each(function rewriteSelector(node) {
-        if (!node.selector) {
-            // handle media queries
-            if (node.type === 'atrule') {
-                if (node.name === 'media' || node.name === 'supports') {
-                    node.each(rewriteSelector);
-                }
-                else if (/-?keyframes$/.test(node.name)) {
-                    // register keyframes
-                    keyframes[node.params] = node.params = node.params + '-' + id;
-                }
-            }
-            return;
+const once = (options) => (root) => {
+  const id = options;
+  const keyframes = Object.create(null);
+  root.each(function rewriteSelector (node) {
+    if (!node.selector) {
+      // handle media queries
+      if (node.type === 'atrule') {
+        if (node.name === 'media' || node.name === 'supports') {
+          node.each(rewriteSelector);
         }
-        node.selector = selectorParser((selectors) => {
-            selectors.each((selector) => {
-                let node = null;
-                // find the last child node to insert attribute selector
-                selector.each((n) => {
-                    // ">>>" combinator
-                    // and /deep/ alias for >>>, since >>> doesn't work in SASS
-                    if (n.type === 'combinator' &&
-                        (n.value === '>>>' || n.value === '/deep/')) {
-                        n.value = ' ';
-                        n.spaces.before = n.spaces.after = '';
-                        return false;
-                    }
-                    // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
-                    if (n.type === 'pseudo' && n.value === '::v-deep') {
-                        n.value = n.spaces.before = n.spaces.after = '';
-                        return false;
-                    }
-                    if (n.type !== 'pseudo' && n.type !== 'combinator') {
-                        node = n;
-                    }
-                });
-                if (node) {
-                    node.spaces.after = '';
-                }
-                else {
-                    // For deep selectors & standalone pseudo selectors,
-                    // the attribute selectors are prepended rather than appended.
-                    // So all leading spaces must be eliminated to avoid problems.
-                    selector.first.spaces.before = '';
-                }
-                // fixed by xxxxxx (h5,app-plus v3 平台继续使用 attribute,其他平台使用 className)
-                if(
-                  process.env.UNI_PLATFORM === 'h5' ||
-                  (
-                    process.env.UNI_PLATFORM === 'app-plus' &&
-                    process.env.UNI_USING_V3
-                  )
-                ){
-                  selector.insertAfter(node, selectorParser.attribute({
-                      attribute: id
-                  }));
-                } else {
-                  selector.insertAfter(node, selectorParser.className({
-                      value: id
-                  }));
-                }
-            });
-        }).processSync(node.selector);
-    });
-    // If keyframes are found in this <style>, find and rewrite animation names
-    // in declarations.
-    // Caveat: this only works for keyframes and animation rules in the same
-    // <style> element.
-    if (Object.keys(keyframes).length) {
-        root.walkDecls(decl => {
-            // individual animation-name declaration
-            if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
-                decl.value = decl.value
-                    .split(',')
-                    .map(v => keyframes[v.trim()] || v.trim())
-                    .join(',');
+        else if (/-?keyframes$/.test(node.name)) {
+          // register keyframes
+          keyframes[node.params] = node.params = node.params + '-' + id;
+        }
+      }
+      return;
+    }
+    node.selector = selectorParser((selectors) => {
+      selectors.each((selector) => {
+        let node = null;
+        // find the last child node to insert attribute selector
+        selector.each((n) => {
+          // ">>>" combinator
+          // and /deep/ alias for >>>, since >>> doesn't work in SASS
+          if (n.type === 'combinator' &&
+            (n.value === '>>>' || n.value === '/deep/')) {
+            n.value = ' ';
+            n.spaces.before = n.spaces.after = '';
+            return false;
+          }
+          // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
+          if (n.type === 'pseudo' && n.value === '::v-deep') {
+            n.value = n.spaces.before = n.spaces.after = '';
+            return false;
+          }
+          if (n.type !== 'pseudo' && n.type !== 'combinator') {
+            node = n;
+          }
+        });
+        if (node) {
+          node.spaces.after = '';
+        }
+        else {
+          // For deep selectors & standalone pseudo selectors,
+          // the attribute selectors are prepended rather than appended.
+          // So all leading spaces must be eliminated to avoid problems.
+          selector.first.spaces.before = '';
+        }
+        // fixed by xxxxxx (h5,app-plus v3 平台继续使用 attribute,其他平台使用 className)
+        if (
+          process.env.UNI_PLATFORM === 'h5' ||
+          (
+            process.env.UNI_PLATFORM === 'app-plus' &&
+            process.env.UNI_USING_V3
+          )
+        ) {
+          selector.insertAfter(node, selectorParser.attribute({
+            attribute: id
+          }));
+        } else {
+          selector.insertAfter(node, selectorParser.className({
+            value: id
+          }));
+        }
+      });
+    }).processSync(node.selector);
+  });
+  // If keyframes are found in this <style>, find and rewrite animation names
+  // in declarations.
+  // Caveat: this only works for keyframes and animation rules in the same
+  // <style> element.
+  if (Object.keys(keyframes).length) {
+    root.walkDecls(decl => {
+      // individual animation-name declaration
+      if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
+        decl.value = decl.value
+          .split(',')
+          .map(v => keyframes[v.trim()] || v.trim())
+          .join(',');
+      }
+      // shorthand
+      if (/^(-\w+-)?animation$/.test(decl.prop)) {
+        decl.value = decl.value
+          .split(',')
+          .map(v => {
+            const vals = v.trim().split(/\s+/);
+            const i = vals.findIndex(val => keyframes[val]);
+            if (i !== -1) {
+              vals.splice(i, 1, keyframes[vals[i]]);
+              return vals.join(' ');
             }
-            // shorthand
-            if (/^(-\w+-)?animation$/.test(decl.prop)) {
-                decl.value = decl.value
-                    .split(',')
-                    .map(v => {
-                    const vals = v.trim().split(/\s+/);
-                    const i = vals.findIndex(val => keyframes[val]);
-                    if (i !== -1) {
-                        vals.splice(i, 1, keyframes[vals[i]]);
-                        return vals.join(' ');
-                    }
-                    else {
-                        return v;
-                    }
-                })
-                    .join(',');
+            else {
+              return v;
             }
-        });
+          })
+          .join(',');
+      }
+    });
+  }
+};
+
+const version = Number(require('postcss/package.json').version.split('.')[0])
+
+if (version < 8) {
+  const postcss = require('postcss')
+  module.exports = postcss.plugin('add-id', function (opts) {
+    return once(opts)
+  })
+} else {
+  module.exports = function (opts) {
+    return {
+      postcssPlugin: 'add-id',
+      Once: once(opts)
     }
-});
+  }
+
+  module.exports.postcss = true
+}
diff --git a/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/trim.js b/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/trim.js
index 442e259cefffdd7fd63938de3c7cbc374ab1420e..bd469e29d3f88bc460917dc37b4911b225e61437 100644
--- a/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/trim.js
+++ b/packages/vue-cli-plugin-uni/packages/@vue/component-compiler-utils/dist/stylePlugins/trim.js
@@ -1,20 +1,38 @@
 "use strict";
 var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+  result["default"] = mod;
+  return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const postcss = __importStar(require("postcss"));
-exports.default = postcss.plugin('trim', () => (css) => {
-    css.walk(({ type, raws }) => {
-        if (type === 'rule' || type === 'atrule') {
-            if (raws.before)
-                raws.before = '\n';
-            if (raws.after)
-                raws.after = '\n';
-        }
-    });
-});
+const once = (css) => {
+  css.walk(({ type, raws }) => {
+    if (type === 'rule' || type === 'atrule') {
+      if (raws.before)
+        raws.before = '\n';
+      if (raws.after)
+        raws.after = '\n';
+    }
+  });
+};
+
+const version = Number(require('postcss/package.json').version.split('.')[0])
+
+if (version < 8) {
+  const postcss = require('postcss')
+  module.exports = postcss.plugin('trim', function (opts) {
+    return once
+  })
+} else {
+  module.exports = function (opts) {
+    return {
+      postcssPlugin: 'trim',
+      Once: once
+    }
+  }
+
+  module.exports.postcss = true
+}