Merge pull request #532 from GrabarzUndPartner/feature/webpack-rules

fix(webpack): fix `setLoaderRulesForShadowMode`

Author: ThornWalli

example/nuxt.config.js

@@ -45,13 +45,15 @@ export default {
     },
 
     postcss: {
-      plugins: {
-        'postcss-preset-env': {
-          preserve: true,
-          stage: 0
-        }
-      },
-      order: 'cssnanoLast'
+      postcssOptions: {
+        plugins: {
+          'postcss-preset-env': {
+            preserve: true,
+            stage: 0
+          }
+        },
+        order: 'cssnanoLast'
+      }
     }
 
   },
@@ -115,7 +117,6 @@ export default {
   },
 
   buildModules: [
-    '@nuxt/postcss8',
     '@nuxtjs/eslint-module',
     '@nuxtjs/stylelint-module'
   ],

lib/utils/webpack.js

@@ -48,7 +48,13 @@ function build (webpackConfigs, nuxt) {
 }
 
 function setLoaderRulesForShadowMode (rules) {
-  const vueLoaderRule = rules.find(({ test }) => test.test('.vue'));
+  let vueLoaderRule = rules.find(({ test }) => test.test('.vue'));
+
+  if ('use' in vueLoaderRule) {
+    vueLoaderRule = vueLoaderRule.use.find(rule => rule.loader.includes('vue-loader'));
+  } else if (!vueLoaderRule?.options) {
+    vueLoaderRule = null;
+  }
 
   if (vueLoaderRule) {
     vueLoaderRule.options.shadowMode = true;