diff --git a/lib/builder/webpack/postcss.js b/lib/builder/webpack/postcss.js index 97bb073318..8acf8b3cf5 100644 --- a/lib/builder/webpack/postcss.js +++ b/lib/builder/webpack/postcss.js @@ -1,7 +1,8 @@ const { existsSync } = require('fs') -const { resolve } = require('path') +const { resolve, join } = require('path') const { cloneDeep } = require('lodash') const { isPureObject } = require('../../common/utils') +const createResolver = require('postcss-import-resolver') module.exports = function postcssConfig() { let config = cloneDeep(this.options.build.postcss) @@ -47,12 +48,19 @@ module.exports = function postcssConfig() { plugins: { // https://github.com/postcss/postcss-import 'postcss-import': { - root: this.options.rootDir, - path: [ - this.options.srcDir, - this.options.rootDir, - ...this.options.modulesDir - ] + resolve: createResolver({ + alias: { + '~': join(this.options.srcDir), + '~~': join(this.options.rootDir), + '@': join(this.options.srcDir), + '@@': join(this.options.rootDir) + }, + modules: [ + this.options.srcDir, + this.options.rootDir, + ...this.options.modulesDir + ] + }) }, // https://github.com/postcss/postcss-url diff --git a/package.json b/package.json index 793b74feef..a9bb7dfa46 100644 --- a/package.json +++ b/package.json @@ -141,6 +141,7 @@ "jsdom": "^11.5.1", "json-loader": "^0.5.7", "nyc": "^11.4.1", + "postcss-import-resolver": "^1.1.0", "puppeteer": "^1.0.0", "request": "^2.83.0", "request-promise-native": "^1.0.5", diff --git a/yarn.lock b/yarn.lock index 9e79acf4ed..8f891a35f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2549,7 +2549,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0: dependencies: once "^1.4.0" -enhanced-resolve@^3.4.0: +enhanced-resolve@^3.4.0, enhanced-resolve@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e" dependencies: @@ -5779,6 +5779,12 @@ postcss-image-set-polyfill@^0.3.5: postcss "^6.0.1" postcss-media-query-parser "^0.2.3" +postcss-import-resolver@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/postcss-import-resolver/-/postcss-import-resolver-1.1.0.tgz#08a1a9811da625d28317abc31565a8408ff28cd2" + dependencies: + enhanced-resolve "^3.4.1" + postcss-import@^11.0.0: version "11.0.0" resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.0.0.tgz#a962e2df82d3bc5a6da6a386841747204f41ef5b"