feat(wepack): support @import using ~assets in css files (#6987)

packages/webpack/src/utils/postcss.js

@@ -45,15 +45,31 @@ export default class PostcssConfig {
     return this.buildContext.buildOptions.postcss
   }
 
+  get postcssImportAlias () {
+    const alias = { ...this.buildContext.options.alias }
+
+    for (const key in alias) {
+      if (key.startsWith('~')) {
+        continue
+      }
+      const newKey = '~' + key
+      if (!alias[newKey]) {
+        alias[newKey] = alias[key]
+      }
+    }
+
+    return alias
+  }
+
   get defaultConfig () {
-    const { dev, alias, srcDir, rootDir, modulesDir } = this.buildContext.options
+    const { dev, srcDir, rootDir, modulesDir } = this.buildContext.options
     return {
       sourceMap: this.buildContext.buildOptions.cssSourceMap,
       plugins: {
         // https://github.com/postcss/postcss-import
         'postcss-import': {
           resolve: createResolver({
-            alias: { ...alias },
+            alias: this.postcssImportAlias,
             modules: [srcDir, rootDir, ...modulesDir]
           })
         },

test/fixtures/basic/assets/app.css

@@ -0,0 +1 @@
+@import "~assets/import.css";

test/fixtures/basic/assets/import.css

@@ -0,0 +1 @@
+.import-css { color: red; }

test/fixtures/basic/nuxt.config.js

@@ -74,6 +74,9 @@ export default {
       handler: (_, res) => res.end('Works!')
     }
   ],
+  css: [
+    '~assets/app.css'
+  ],
   build: {
     scopeHoisting: true,
     publicPath: '',