fix: revert postcss-loader order change

haoqunjiang · haoqunjiang · commit b559005ce64d · 2018-09-13T00:10:33.000+08:00
The loader used for minification should come first in the rules array
(i.e. execute last, as webpack loaders are executed in reverse order).
diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js
@@ -133,10 +133,8 @@ test('css.extract', () => {
     // does not support mixing config files with loader options.
     expect(findLoaders(config2, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader))
     expect(findOptions(config2, lang, 'css').importLoaders).toBe(3)
-    // minification loader should be injected after the user-facing postcss-loader
-    const rule = findRule(config2, lang)
-    const postcssUse = rule.use.slice().reverse().find(({ loader }) => loader === 'postcss-loader')
-    expect(postcssUse.options.plugins).toBeTruthy()
+    // minification loader should be injected before the user-facing postcss-loader
+    expect(findOptions(config2, lang, 'postcss').plugins).toBeTruthy()
   })
 })
 
diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js
@@ -130,13 +130,6 @@ module.exports = (api, options) => {
           .loader('css-loader')
           .options(cssLoaderOptions)
 
-        if (hasPostCSSConfig) {
-          rule
-            .use('postcss-loader')
-            .loader('postcss-loader')
-            .options(Object.assign({ sourceMap }, loaderOptions.postcss))
-        }
-
         if (needInlineMinification) {
           rule
             .use('cssnano')
@@ -147,6 +140,13 @@ module.exports = (api, options) => {
             })
         }
 
+        if (hasPostCSSConfig) {
+          rule
+            .use('postcss-loader')
+            .loader('postcss-loader')
+            .options(Object.assign({ sourceMap }, loaderOptions.postcss))
+        }
+
         if (loader) {
           rule
             .use(loader)
