diff --git a/packages/webpack/src/utils/postcss.js b/packages/webpack/src/utils/postcss.js index cb881933b9..85bdad9f03 100644 --- a/packages/webpack/src/utils/postcss.js +++ b/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] }) }, diff --git a/test/fixtures/basic/assets/app.css b/test/fixtures/basic/assets/app.css new file mode 100644 index 0000000000..1c6bb11965 --- /dev/null +++ b/test/fixtures/basic/assets/app.css @@ -0,0 +1 @@ +@import "~assets/import.css"; diff --git a/test/fixtures/basic/assets/import.css b/test/fixtures/basic/assets/import.css new file mode 100644 index 0000000000..4a57b86239 --- /dev/null +++ b/test/fixtures/basic/assets/import.css @@ -0,0 +1 @@ +.import-css { color: red; } diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js index f350ceefbf..5e47058d45 100644 --- a/test/fixtures/basic/nuxt.config.js +++ b/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: '',